Develop Reference

jQuery - show and hide div on hover using closest selector

I am trying to simply achieve the show/hide feature on hover using the hover function of jquery.
However not able to show and hide the particular div. When I hover over the current span tag I want only the current(closest) div to hide and the closest or next possible div to be shown.
But currently since the class names are same, it is showing all the divs
FIDDLE HERE
HTML structure:
<div class="parentCat">
<div class="imageContainer">
<span class="hoverEffect">Some Image</span>
</div>
<div class="showContainer">
<span>New Image</span>
</div>
</div>
<div class="parentCat">
<div class="imageContainer">
<span class="hoverEffect">Some Image</span>
</div>
<div class="showContainer">
<span>New Image</span>
</div>
</div>

If you shift the event to the parent element, everything becomes simpler:
$('.ca').hover(function () {
$('.imageContainer', this).hide();
$('.showContainer', this).show();
}, function () {
$('.imageContainer', this).show();
$('.showContainer', this).hide();
});
Updaated working example.

If you want this effect, you need to alter your code. The div which has the hover event can't be one that you are hiding. It is also good practice to nest the related divs INSIDE of a parent div. I believe this is what you are looking for.
HTML
<div class="ca hoverEffect" style="height:40%">
<div class="imageContainer">
<span>Some Image</span>
</div>
<div class="showContainer">
<span>New Image</span>
</div>
</div>
JS
$('.hoverEffect').hover(function () {
$(this).find('.imageContainer').hide();
$(this).find('.showContainer').show();
}, function () {
$(this).find('.imageContainer').show();
$(this).find('.showContainer').hide();
});
Working jsfiddle

Jquery toggle elements

I have this HTML
<div id="text-slide"><ul class="menu">
<li>Webdesign
</li><div class="toggle1" style="display:none;width:45%; position:absolute;left: 16%; top:0;"><h2>Webdesign</h2><p>Test</p></div>
<li>
Design de identidades
</li><div class="toggle2" style="display:none;width:45%;position:absolute;left: 16%; top:0;"><h2>Design de identidades</h2><p>Test</p></div></ul></div>
And I created this jquery for two elements separated
$(function() {
$('#toggle1').click(function() {
$(".toggle1").toggle("slow");
$(".toggle2").hide("slow");
$(this).addClass('current');
$("#toggle2").removeClass('current');
return false;
});
$('#toggle2').click(function() {
$(".toggle2").toggle("slow");
$(".toggle1").hide("slow");
$(this).addClass('current');
$("#toggle1").removeClass('current');
return false;
});
});
Someone knows how to add many elements and simplify the jquery script?
I tried to add the third element with the same jquery but dont works for me.

Something like this?
HTML
<div class="toggle">toggle</div>
<div class="content">content</div>
<div class="toggle">toggle</div>
<div class="content">content</div>
<div class="toggle">toggle</div>
<div class="content">content</div>
<div class="toggle">toggle</div>
<div class="content">content</div>
CSS
.content {display:none;}
JS
$('.toggle').click(function(){
if($(this).next('.content').is(':hidden')) {
$('.content').slideUp();
$(this).next('.content').slideDown();
}
});
Updated fiddle

you should use the selector not() for this task it works great for me.
$('.content').not($this).slideUp('slow');
UPDATED FIDDLE HERE

Div Not Displaying On Click With JQuery (CSS - Block/None)

I would like it so when I click on a Bootstrap Glyphicon a div is displayed.
I currently have this HTML (simplified):
<span id="headerdisplaybuttonsxs" class="glyphicon glyphicon-menu-hamburger"> </span>
<div id="headerrightside" class="col-xs-12 col-sm-4"> text... </div>
Then this JS:
$('#headerdisplaybuttonsxs').click(function()) {
$('#headerrightside').css("display", "block");
});
So I would basically like #headerrightside to display on the clicking of #headerdisplaybuttonsxs. Problem is I can't get that to work.
#headerdisplaybuttonsxs Has a CSS property of display:none.
I have tried $('#headerrightside').show() but that does not seem to work. How could I get this to work? Thank You!!

There was a typo on the click event function with an extra ).
$('#headerdisplaybuttonsxs').click(function() {
$('#headerrightside').css("display", "block");
});
#headerrightside {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="headerdisplaybuttonsxs" class="glyphicon glyphicon-menu-hamburger">Icon</span>
<div id="headerrightside" class="col-xs-12 col-sm-4"> text... </div>

jQuery 'this' following a .find click function

Need some help with this one...I have the following javascript code:
var quickSection = $('.quick-links');
var quickContent = $('.quick-links .row .inner-content')
if ( quickSection.is('*') ) {
quickContent.find("img").click(function() {
$(this).find("ul").slideDown("slow");
});
}
There are three instances of my variable quickContent. Each have a ul, img, etc. I need to display the ul that correlates with the image that is clicked. I thought the above code would do the trick, but I suppose that 'this' is also returning the '.find(img)' from the previous line. Any tips as to how I can solve this in the most efficient manner? Any help is much appreciated.
html:
<div class="quick-links block">
<div class="main-wrap container">
<div class="row">
<div class="col-sm-4 first column">
<div class="inner-content">
<h2>Admissions<a><img src="/sites/all/themes/merge/img/blue-down.png" /></a></h2>
<ul>
<li><a>Apply Now</a></li>
<li><a>Schedule a Visit</a></li>
<li><a>Student Life</a></li>
</ul>
</div><!--end inner-content-->
</div><!--end col-->
<div class="col-sm-4 second column">
<div class="inner-content">
<h2>Academics<a><img src="/sites/all/themes/merge/img/green-down.png" /></a></h2>
<ul>
<li><a>A Liberal Arts Degree</a></li>
<li><a>College of Arts & Sciences</a></li>
<li><a>College of Business</a></li>
<li><a>College of Health Sciences</a></li>
</ul>
</div><!--end inner-content-->
</div><!--end col-->
<div class="col-sm-4 third column">
<div class="inner-content">
<h2>Student Life<a><img src="/sites/all/themes/merge/img/gold-down.png" /></a></h2>
<ul>
<li><a>Campus Photo Tour</a></li>
<li><a>Student Organizations</a></li>
<li><a>Residence Life</a></li>
<li><a>Facilities</a></li>
<li><a>Food & Drink</a></li>
</ul>
</div><!--end inner-content-->
</div><!--end col-->
</div><!--end row-->
</div><!--end container-->
</div><!--end quick-links-->

this will be the image that was clicked on, not an element of quickContent. You need to go up to the container and then search down for the corresponding ul.
quickContent.find("img").click(function() {
$(this).closest(".inner-content").find("ul").slideDown("slow");
}
Or if they're both children of the same element, you can use:
quickContent.find("img").click(function() {
$(this).siblings("ul").slideDown("slow");
}

You can include img in your selector like:
var quickSection = $('.quick-links');
if (quickSection.is('*')) {
$('.quick-links .row .inner-content img').click(function() {
$(this).parents("h2").next("ul").slideDown("slow");
});
}

.parent() will do the trick, as it changes the current scope to the div containing your clicked image.
var quickSection = $('.quick-links');
var quickContent = $('.quick-links .row .inner-content')
if ( quickSection.is('*') ) {
quickContent.find("img").click(function() {
$(this).parent().find("ul").slideDown("slow");
});
}

When you attach a click handler to an element, $(this) will refer to the clicked element; so the image, in this case. Since you have multiple jQuery objects in quickContent, you'll probably have to traverse back up the the DOM tree to find the one you need. Something like:
quickContent.find("img").click(function(){
$(this).parents('.quick-links .row .inner-content').find("ul").slideDown("slow");
}
There may well be a more efficient way, depending on your exact DOM structure. For instance, the jQuery functions .next(), .prev(), or .siblings() might be useful.

re-applying jquery to cloned objects

What is the proper way to re-apply jquery to objects which are cloned??
I have an example I rigged up in jsfiddle here: http://jsfiddle.net/49o6arLu/16/
<div class="hidden element-holder">
<div class="element">
<div class="button">Button</div>
<div class="green-square"></div>
</div>
</div>
<div class="element">
<div class="button">Button</div>
<div class="green-square"></div>
</div>
<div class="clear"></div>
<div class="add-element">Add Element</div>
$('div.button').click(function(event) {
if($(this).parent().children('.green-square').is(':visible')) {
$(this).parent().children('.green-square').hide();
}else{
$(this).parent().children('.green-square').show();
}
});
$('div.add-element').click(function(event) {
$('div.element-holder').children('div').clone().insertAfter($('div.element-holder'));
});
As you can see, the initial displayed box and button work just fine. However, When you add another element the new element button does not work anymore.
I understand why I have this problem, however I don't know the proper way I should go about re-applying the Jquery to the new elements which are cloned.
Can someone provide a solution to the jquery and provide some explanation as to what you did?
Thanks!

You can save the need to re-apply the handler to all the appended elements by having a single delegated click handler on a common parent element.
First of all amend your HTML to include the container, in this case #element-container:
<div class="hidden element-holder">
<div class="element">
<div class="button">Button</div>
<div class="green-square"></div>
</div>
</div>
<div id="element-container">
<div class="element">
<div class="button">Button</div>
<div class="green-square"></div>
</div>
<div class="clear"></div>
</div>
<div class="add-element">Add Element</div>
Then you can amend the Add Element button to append to that container:
$('div.add-element').click(function (event) {
$('div.element-holder').children('div').clone().appendTo('#element-container');
});
Finally you can add the delegated event handler to the new #element-container. Note that I also shortened the logic using toggle() and siblings():
$('#element-container').on('click', 'div.button', function (event) {
$(this).siblings('.green-square').toggle()
});
Example fiddle

In order to copy event handlers you should send true in the clone method:
$('div.add-element').click(function(event) {
$('div.element-holder').children('div').clone(true).insertAfter($('div.element-holder'));});