Hide/show expands all divs when I want it to open

问题:

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." When you click each button I want it to display the hidden div content below the photo. Right now when I click the button it opens all of the divs instead of the 1 player I want to show. Here is the script I am using

$(document).ready(function(){

$(".slidingDiv").hide();
$(".show_hide").show();

$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
return false;
});

});

$(document).ready(function(){

$(".slidingDiv2").hide();
$(".show_hide2").show();

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

});

Here is the html

<div class="popup-open">
    <div class="title"><?php the_title(); ?></div>

<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>" class="show_hide popup">WHAT'S IN THE BAG</a><br/>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>" class="show_hide2 popup">PLAYER HISTORY</a>


    </div>
    </div>  

<div class="slidingDiv">
  <div id="tabs-1">
                    <div class="witb-tab">

                        <?php 

                        $fields = CFS()->get('witb');

                        if($fields) :
                            foreach ($fields as $field) : ?>
                            <div class="row">
                                <a target="_blank" href="<?php echo $field['cta_link'];?>">
                                    <div class="image">
                                        <img src="<?php echo $field['product_image'];?>" alt="<?php echo $field['product_name'];?>">
                                        <a target="_blank" class="product-name" href="<?php echo $field['cta_link'];?>" title="<?php echo $field['product_name'];?>">
                                    <?php echo $field['product_name'];?>
                                </a>
                                    </div>
                                </a>
                            </div>

                        <?php endforeach; endif; ?>

                    </div>
                    <a href="#" class="show_hide" style="float:right;">CLOSE</a>
            </div>


  </div>

<div class="slidingDiv2">
   <div class="column left">

            <!-- post thumbnail -->
            <?php                       
                if (has_post_thumbnail()) {
                    the_post_thumbnail('profile-thumb');
                }
                // Check if post thumbnail exist
                else {
                    $values = CFS()->get('gender');
                    if (is_array($values)) {
                        foreach ($values as $value => $label) {
                            //echo '<h1 style="color:red">' . $value . '</h1>';
                            echo '<img src="' . get_bloginfo('template_directory') . '/img/thumb-'. $value . '.png"' . 'alt="thumbnail" />';
                        }
                    }
                }
            ?>
            <!-- /post thumbnail -->

            <div class="player-biography">
                <?php echo CFS()->get('player_biography'); ?>
            </div>
        </div>
        <div class="column right">
  <div id="tabs-2">
                    <div class="content-wrap"><?php the_content(); // Dynamic Content ?></div>
                </div>
             <a href="#" class="show_hide2" style="float:right;">CLOSE</a>    
  </div>
  </div>

回答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>

回答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;
   });
});

回答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>

回答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