Develop Reference

All the elements disappear when I click on one of them, but only need the elements that I haven't clicked on to disappear

I want all the other elements(that I haven't clicked on) to disappear when I click on one of them, but instead all of them disappear. Here's the Javascript Code:
$(".content-toggler").click(function() {
let elTriggered = $(this);
elTriggered.parent().toggleClass("expand");
$(".content-toggler").each(function(index, element) {
if ($(element) === elTriggered) {
console.log("Passing on the clicked element...");
} else {
$(element).parent().toggleClass("hide");
}
console.log($(element))
console.log(elTriggered)
});
});
.circular-anim {
display: grid;
align-items: center;
justify-content: center;
margin: 1em auto;
/*With 'auto', you center the element according to the margin*/
margin-top: 0;
padding: 0;
width: 100%;
height: 100%;
border-radius: 2em;
position: absolute;
background: rgba(0, 0, 0, 0.25);
transition: 1s ease;
}
.content-toggler {
margin: 0;
padding: 0;
border-style: none;
background: #8D9CF4;
width: 175px;
height: 175px;
border-radius: 50%;
position: absolute;
top: 32.5px;
left: 188.5px;
}
.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="page-content">
<div class="circular-anim"><button class="content-toggler"></button></div>
<div class="circular-anim"><button class="content-toggler"></button></div>
<div class="circular-anim"><button class="content-toggler"></button></div>
<div class="circular-anim"><button class="content-toggler"></button></div>
</div>
By the way, I injected some of the content from the js file and they already work well. Don't be surprised if you see some of the classes missing in the css code.
Why do all my elements disappear even though I want the one that I click on to stay?

Each time you call $() it creates a new jQuery object, and it will not compare equal to another object even if they refer to the same DOM element.
You can just use the .not() function to remove an element from the collection, instead of looping with .each() and comparing.
$(".content-toggler").click(function() {
let elTriggered = $(this);
elTriggered.parent().toggleClass("expand");
$(".content-toggler").not(this).toggleClass("hide");
});
.circular-anim {
display: grid;
align-items: center;
justify-content: center;
margin: 1em auto;
/*With 'auto', you center the element according to the margin*/
margin-top: 0;
padding: 0;
width: 100%;
height: 100%;
border-radius: 2em;
position: absolute;
background: rgba(0, 0, 0, 0.25);
transition: 1s ease;
}
.content-toggler {
margin: 0;
padding: 0;
border-style: none;
background: #8D9CF4;
width: 175px;
height: 175px;
border-radius: 50%;
position: absolute;
top: 32.5px;
left: 188.5px;
}
.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="page-content">
<div class="circular-anim"><button class="content-toggler"></button></div>
<div class="circular-anim"><button class="content-toggler"></button></div>
<div class="circular-anim"><button class="content-toggler"></button></div>
<div class="circular-anim"><button class="content-toggler"></button></div>
</div>

Artboard Style Layout Using CSS Transform Scale

I'd like to have the .container and .box scale in and out from the one I clicked on. The problem I'm running into is when I scale in and out, it scales in and out from the first .box div, not the one I clicked on.
Each .box will contain it's own unique content, so when viewing this in "Artboard" view (Zoomed Out), I want people to be able to see what's contained in that particular .box. When people click on one of the boxes, I want it to scale back to (1) to cover the viewport. And if the person is on the 4th .box and they click "Zoom Out", I want it to zoom out from that particular .box.
Each box will be the size of the viewport, which is how it's set up now.
Does anyone have a solution in CSS only? Or is this something that can be better accomplished in JS? I'm not a JS expert, I'm just getting into it, so I'm curious if there's something I can do in some simple JS.
Please see my codepen:
http://codepen.io/jareko999/pen/eZGLZB
HTML
<div class="bar">
<button class="zoomout" onclick="zoomOut()">Zoom Out</button>
</div>
<div class="container">
<div class="artboard">
<div class="box">
<i class="fa fa-diamond"></i>
</div>
<div class="box">
<i class="fa fa-bolt"></i>
</div>
<div class="box">
<i class="fa fa-flag"></i>
</div>
<div class="box">
<i class="fa fa-flask"></i>
</div>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
height: 100vh;
width: 100%;
background: #e1e1e1;
overflow-y: hidden;
}
.bar {
position: fixed;
display: flex;
flex-direction: row;
box-sizing: border-box;
bottom: 0;
width: 100%;
height: 80px;
background: white;
padding: 14px 0;
z-index: 1;
}
.zoomout {
-webkit-appearance: none;
border: none;
outline: 0;
width: 100px;
height: 40px;
margin: auto;
background: black;
color: white;
border-radius: 10px;
cursor: pointer;
}
.container {
height: 100vh;
width: 100%;
transition: .2s ease-out;
transform: scale(1);
}
.container-small {
height: 100vh;
width: 100%;
transition: .2s ease-out;
transform: scale(.7);
}
.artboard {
height: 100%;
width: 100%;
display: flex;
display: -webkit-flex;
background: #e1e1e1;
}
.box {
padding-top: 44vh;
box-sizing: border-box;
text-align: center;
flex-shrink: 0;
width: 100%;
height: 100%;
box-shadow: 0 2px 4px #a9a9a9;
background: linear-gradient(to right, #276cd6 , #00a651);
transition: .2s ease-out;
transform: scale(1);
}
.box-small {
padding-top: 44vh;
box-sizing: border-box;
text-align: center;
flex-shrink: 0;
width: 100%;
height: 100%;
box-shadow: 0 2px 4px #a9a9a9;
background: linear-gradient(to right, #276cd6 , #00a651);
transition: .2s ease-out;
transform: scale(.9);
cursor: pointer;
}
.box i {
color: #e1e1e1;
font-size: 3em;
}
.overflow {
overflow: hidden;
}
.remove {
display: none;
}
::-webkit-scrollbar {
width: 12px;
height: 4px;
}
/* Track */
::-webkit-scrollbar-track {
background: white;
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 100px;
border-radius: 100px;
background: #4099ff;
}
JS
$(document).ready(function() {
$('.container').addClass('overflow');
});
function zoomOut() {
$('.bar').addClass('remove');
$('.box').addClass('box-small');
$('.container').removeClass('overflow');
$('.container').addClass('container-small');
}
$('.box').click(function() {
$('.bar').removeClass('remove');
$('.box').removeClass('box-small');
$('.container').addClass('overflow');
$('.container').removeClass('container-small');
});

What you're trying to achieve can be done using a CSS only method.
This method relies on using location hashes (url.com#foobar) and the :target pseudo selector.
The :target pseudo selector allows you to target the element which has the id matching the location hash. For example, imagine you have an element with the id "foobar", the #foobar:target selector will only apply if you have navigated to url.com#foobar. You can create a link with the href attribute pointing #foobar to have a button trigger this pseudo selector.
In your case, you can apply the zoom out styles when the #container location hash is matched, and only show the slide matched by the location hash.
The drawback of this method is that you have to add ids, and add links to actually trigger the :target pseudo class.
My explanation might not be clear, so I put up this demo:
http://codepen.io/ntim/pen/ONxGJd

how to make transition effects(slide) in autocomplete

autocomplete working fine but i need a transition effect(slide down) in suggested menu,
I referred from this sites http://tutsforweb.blogspot.in/2012/05/auto-complete-text-box-with-php-jquery.html
and i tried
$(document).ready(function() {
$("#tag").autocomplete("autocomplete.php", {
selectFirst: true
});
});
.ac_results {
background-color: white;
border: 1px solid #5c5c5c;
left: 174.5px !important;
overflow: hidden;
padding: 0;
width: 247px !important;
z-index: 99999;
}
.ac_results ul {
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
}
.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;
font-family: "armataregular";
font-size: 12px;
line-height: 16px;
overflow: hidden;
}
.ac_loading {
background: white url('indicator.gif') right center no-repeat;
}
.ac_odd {
background-color: #eee;
}
.ac_over {
background-color: #ccc;
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listone">
<input type="text" placeholder="Enter Keyword" id="tag">
</div>
I added transition property on id="tag" and .ac_results its not working,
please suggest any idea.,

Transitions work by listening to a property and will "animate" when that property changes. So in your case you would need to add a transition to #ac_results. Set the #ac_results height to 0, and when it finds results change the height that element and it should slide down
transition: height 0.5s ease-in-out;
height: 0;
Here is a quick example of it (note that it doesn't do any auto complete, just it shows when input is detected)
http://jsfiddle.net/schwqa7k/1/

Please help me convert this script to a simple image slider

Can some please, PLEASE! help me with this problem. Okay so I have a code that at first I thought worked well but I forgot that when the default <img src="test-img-1.jpg" class="actual-img"> content is loaded the first of the three buttons below the image should take the active css state that I've specified for the active buttons to take. Now what I want is for this little code to behave like a normal slider by loading in the css hidden contents into the ".image-area" div and it works when I click on the buttons. Problems only surface when I am I trying to give the first loaded content an active state. One way I believe can fix this (I can't implement it) is to let the first immediate default content be this inline hidden div: (
<div id="image-area2">
<div class="img-area-wrapper">
<img src="test-img-2.jpg" class="actual-img">
</div>
</div>) while somehow letting the first button be set to active. I should also mention that I'm not the best with jquery. Please help me fix this someone!
Here is a fiddle to get a better understanding: http://jsfiddle.net/pyrot/84sU4/
If my way of going about this is totally absurd please let me know.
this is my code:
<script type="text/javascript">
$(document).ready(function() {
//loads default content
//$('#image-area').load($('.menu_top a:first-child').attr('href'));
$('.o-links').click(function() {
// href has to be the id of the hidden content element
var href = $(this).attr('href');
$('#image-area').fadeOut(1000, function() {
$(this).html($('#' + href).html()).fadeIn(1000);
});
return false;
});
});
$(function() {
$('.o-links').click(function(e) {
//e.preventDefault();
$('.o-links').not(this).removeClass('O_Nav_Current');
$(this).addClass('O_Nav_Current');
});
});
</script>
this is my html:
<section id="image-slider-container">
<div class="image-slider-inner">
<div id="image-area">
<div class="img-area-wrapper">
<!--currently this is the default I want to change-->
<img src="test-img-1.jpg" class="actual-img">
</div>
</div>
<div id="image-area2">
<div class="img-area-wrapper">
<!--I would like this to be the default content that when
seen the first button is set to active-->
<img src="test-img-2.jpg" class="actual-img">
</div>
</div>
<div id="image-area3">
<div class="img-area-wrapper">
<img src="test-img-3.jpg" class="actual-img">
</div>
</div>
<div class="slider-buttons">
<div class="slider-buttons-container">
</div>
</div>
</div>
</section>
and this is my css:
#image-slider-container {
width: 100%;
height: auto;
background-color: #ffffff;
padding: 5% 0px 0% 0px;
}
.image-slider-inner {
width: 100%;
height: auto;
max-width: 1040px;
margin: 0px auto;
padding: 0px 20px 0px 20px;
}
#image-area2,
#image-area3 {
width: 100%;
height: auto;
display: none;
}
#image-area {
width: 100%;
height: auto;
}
#image-area .img-area-wrapper {
width: 80%;
height: auto;
max-width: 1140px;
margin: 0px auto;
}
.actual-img {
width: 100%;
height: 100%;
}
.slider-buttons {
width: 100%;
height: auto;
max-width: 1140px;
margin-top: 0px;
}
.slider-buttons-container {
width: 100%;
height: auto;
max-width: 1140px;
margin: 10px auto 0px auto;
text-align: center;
}
.slider-buttons-container a {
border-radius: 360px;
border: 1px #C5C5C5 solid;
padding: 0px 5px 0px 5px;
margin: 0px 5px 0px 5px;
background-color: #efefef;
outline: 0px;
text-decoration: none;
font-size: 12px;
box-shadow: -2px 1px 2px 0px #ADADAD;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
.slider-buttons-container a:hover {
border: 1px #C5C5C5 solid;
padding: 0px 5px 0px 5px;
background-color: #DAD8D8
}
.slider-buttons-container a:active {
position: relative;
top: 2px;
}
.O_Nav_Current {
border: 1px #999999 solid !important;
background-color: #DAD8D8 !important;
}

Problems only surface when I am I trying to give the first loaded content an active state
Does this mean that you want to add a class to the first button?
$('.o-links').click(function(e) {
// ...
}).first().addClass('O_Nav_Current');
instead of using IDs for the slider's items and resetting html contents you can use classes and indexes:
CSS:
.image-area {
width: 100%;
height: auto;
display: none;
}
.image-area:first-of-type {
display: block;
}
JavaScript:
var $slides = $('.image-area'),
$btns = $('a.o-links');
$btns.on('click', function (e) {
var i = $btns.removeClass('O_Nav_Current').index(this);
$(this).addClass('O_Nav_Current');
$slides.filter(':visible').fadeOut(1000, function () {
$slides.eq(i).fadeIn(1000);
});
e.preventDefault();
}).first().addClass('O_Nav_Current');
http://jsfiddle.net/RmF57/

Foundation 4 Reveal not working?

Page: http://www.bureauforgood.com/RSTR-IA-2B/1.1-Home-Modal.html
Near the end of the body tag I have the following:
<script src="javascripts/jquery.js"></script>
<script src="javascripts/foundation4.min.js"></script>
<script src="javascripts/foundation.reveal.js"></script>
(note that I changed the name of the js file to "foundation4". This change works fine and I know this because Orbit is working)
Followed by this
<div id="myModal" class="reveal-modal">
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal">×</a>
</div>
<div class="reveal-modal-bg" style="display: none"></div>
Click Me For A Modal
Then my closing body and html tags.
(for testing purposes I'm putting my button right at the bottom of the page, uner the footer)
On my CSS file I made sure this was included (the all the Reveal-related CSS that comes with Foundation)
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: black;
background: rgba(0, 0, 0, 0.45);
z-index: 98;
display: none;
top: 0;
left: 0; }
.reveal-modal {
visibility: hidden;
display: none;
position: absolute;
left: 50%;
z-index: 99;
height: auto;
margin-left: -40%;
width: 80%;
background-color: white;
padding: 1.25em;
border: solid 1px #666666;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
top: 50px; }
.reveal-modal .column,
.reveal-modal .columns {
min-width: 0; }
.reveal-modal > :first-child {
margin-top: 0; }
.reveal-modal > :last-child {
margin-bottom: 0; }
.reveal-modal .close-reveal-modal {
font-size: 1.375em;
line-height: 1;
position: absolute;
top: 0.5em;
right: 0.6875em;
color: #aaaaaa;
font-weight: bold;
cursor: pointer; }
#media only screen and (min-width: 768px) {
.reveal-modal {
padding: 1.875em;
top: 6.25em; }
.reveal-modal.tiny {
margin-left: -15%;
width: 30%; }
.reveal-modal.small {
margin-left: -20%;
width: 40%; }
.reveal-modal.medium {
margin-left: -30%;
width: 60%; }
.reveal-modal.large {
margin-left: -35%;
width: 70%; }
.reveal-modal.xlarge {
margin-left: -47.5%;
width: 95%; } }
#media print {
.reveal-modal {
background: white !important; } }
But the plugin doesn't work! Any ideas?

Ok, solved. I forgot to include this
<script>
$(document).foundation();
</script>

Nothing is wrong with any of your code, just make sure to always fully include the snippet below before closing your body tag:
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
Also just a suggestion, you can add a button class to your anchor tag to make it even cooler looking. Like so:
Click Me For A Modal

You need to include this script
<script src="javascripts/foundation/foundation.reveal.js"></script>