Skip to content Skip to sidebar Skip to footer
Home / Javascript / Jquery / Wordpress

Hide/show Expands All Divs When I Want It To Open One At A Time

Post a Comment
I am making a page that is responsive and is pulling content from wordpress. There are 4 photos and in each photo is a button displaying 'whats in the bag' and 'player history.' Wh

Solution 1:

I believe you are looking for the this selector.

let's say you have something like:

<div class="item">
    <h1>Item1</h1>
    <div class="show_hide">
        Popping in and out 1.
    </div>
</div>

<div class="item">
    <h1>Item2</h1>
    <div class="show_hide">
        Popping in and out 2.
    </div>
</div>

you can do

$('.item').click(function() {
    $(this).children('.show_hide').slideToggle();
});

JSFiddle

var main = function() {
  $('.show_hide').hide();

  $('.item').click(function() {
    $(this).children('.show_hide').slideToggle();
  });
}

$(document).ready(main);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="item">
  <h1>Item1</h1>
  <div class="show_hide">
    Popping in and out 1.
  </div>
</div>

<div class="item">
  <h1>Item2</h1>
  <div class="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();
      return false;
   });
   $(".slidingDiv2").hide();
   $(".show_hide2").show();

   $('.show_hide2').click(function(){
      $(this).parents('.slidingDiv2').slideToggle();
      return false;
   });
});

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();
    });
});

DEMO

more clear demo

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

 <script src="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

<script src="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();
    return false;
});

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:

<div class="slidingDiv">
    <div id="tabs-1">
        ...    
        <a href="#" class="show_hide" style="float:right;">CLOSE</a>
    </div>
 </div>
<div class="slidingDiv">
    <div id="tabs-2">
        ...    
        <a href="#" class="show_hide" style="float:right;">CLOSE</a>
    </div>
 </div>
 ...

Fiddle Example


You may like these posts

Post a Comment for "Hide/show Expands All Divs When I Want It To Open One At A Time"