Hide/show Expands All Divs When I Want It To Open One At A Time
Solution 1:
I believe you are looking for the this selector.
let's say you have something like:
<divclass="item"><h1>Item1</h1><divclass="show_hide">
Popping in and out 1.
</div></div><divclass="item"><h1>Item2</h1><divclass="show_hide">
Popping in and out 2.
</div></div>you can do
$('.item').click(function() {
$(this).children('.show_hide').slideToggle();
});
var main = function() {
$('.show_hide').hide();
$('.item').click(function() {
$(this).children('.show_hide').slideToggle();
});
}
$(document).ready(main);<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><divclass="item"><h1>Item1</h1><divclass="show_hide">
Popping in and out 1.
</div></div><divclass="item"><h1>Item2</h1><divclass="show_hide">
Popping in and out 2.
</div></div>Solution 2:
Instead of targeting the class in your on-click function try using "this". You also dont need more than one ready function. Just so you know, the problem with your code is that you're targeting all elements of the class. You could also use IDs to target specific elements.
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(this).parents('.slidingDiv').slideToggle();
returnfalse;
});
$(".slidingDiv2").hide();
$(".show_hide2").show();
$('.show_hide2').click(function(){
$(this).parents('.slidingDiv2').slideToggle();
returnfalse;
});
});
Solution 3:
you can try something like this
$(document).ready(function(){
// hide all divs class starts with slidingDiv
$("div[class^='slidingDiv']").hide();
// show all anchor class starts with show_hide
$("a[class^='show_hide']").show();
// anchor click event
$(".title > a[class^='show_hide']").on('click', function(e){
e.preventDefault(); // prevent to reload// slide up all divs starts with slidingDiv but not the slidingDiv with index with <a> .. that mean if you click a with index() 0 it will hide all slidingDiv divs and show slidingDiv with index 0 and 1 for 1 and son on
$("div[class^='slidingDiv']").not($("div[class^='slidingDiv']").eq($(this).index())).slideUp();
$("div[class^='slidingDiv']").eq($(this).index()).slideToggle();
});
});
more clear demo
use this code instead of all your js code you posted
be sure to include jquery inside <head></head> or before closing </body> and after that run your code
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>ok complete code inside <head></head> or before </body> should be like this
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script>
$(document).ready(function(){
// hide all divs class starts with slidingDiv
$("div[class^='slidingDiv']").hide();
// show all anchor class starts with show_hide
$("a[class^='show_hide']").show();
// anchor click event
$(".title > a[class^='show_hide']").on('click', function(e){
e.preventDefault(); // prevent to reload// slide up all divs starts with slidingDiv but not the slidingDiv with index with <a> .. that mean if you click a with index() 0 it will hide all slidingDiv divs and show slidingDiv with index 0 and 1 for 1 and son on
$("div[class^='slidingDiv']").not($("div[class^='slidingDiv']").eq($(this).index())).slideUp();
$("div[class^='slidingDiv']").eq($(this).index()).slideToggle();
});
});
</script>Solution 4:
Because the selector .className affects all elements in the DOM with such class. What you will want to do is go from your clicked <a> and use the structure of your DOM to get the element you want by looking at it's parent's parent:
$('.show_hide').click(function(){
$(this).parent().parent(".slidingDiv").slideToggle();
returnfalse;
});
In this case you only need a single show-hide class and a single slideingDiv class. It's not necessary to have slideingDiv, slideingDiv2, slideingDiv3, ... As it takes away the point of using classes in the first place, and they might as would be ids. The structure is the same, simply with the same classes:
<divclass="slidingDiv"><divid="tabs-1">
...
<ahref="#"class="show_hide"style="float:right;">CLOSE</a></div></div><divclass="slidingDiv"><divid="tabs-2">
...
<ahref="#"class="show_hide"style="float:right;">CLOSE</a></div></div>
...
Post a Comment for "Hide/show Expands All Divs When I Want It To Open One At A Time"