单击多个 Div 时显示和隐藏无法正常工作

Question

Please help, I have this code but the hide button does not work

 $('.expandArrow, .hideArrow').on('click', function() { var isExpand = $(this).hasClass('expandArrow'); $(this).closest('.trDest').toggleClass('visible-description', isExpand).next().toggle(isExpand); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="trDest1" class="trDest"> <!-- Some content here --> <button class="expandArrow">Show</button> </div> <div id="trDest2_details" class="details"> <p>show details</p> <button class="hideArrow">Hide</button> </div> <div id="trDest2" class="trDest"> <!-- Some content here --> <button class="expandArrow">Show</button> </div> <div id="trDest2_details" class="details"> <p>show details</p> <button class="hideArrow">Hide</button> </div> <div id="trDest3" class="trDest"> <!-- Some content here --> <button class="expandArrow">Show</button> </div> <div id="trDest2_details" class="details"> <p>show details</p> <button class="hideArrow">Hide</button> </div>

I just don't get it why it does not work, thanks

here is the FIDDLE

Answer 1

Use if statement for hasClass line. If the element has class it returns true, you are setting the variable with a boolean and not classname

 $('.expandArrow, .hideArrow').on('click', function(){ if($(this).hasClass('hideArrow')); $(this).closest('.trDest').toggleClass('visible-description', 'hideArrow').next().toggle('hideArrow'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="trDest1" class="trDest"> <!-- Some content here --> <button class="expandArrow">Show</button> </div> <div id="trDest2_details" class="details"> <p>show details</p> <button class="hideArrow">Hide</button> </div> <div id="trDest2" class="trDest"> <!-- Some content here --> <button class="expandArrow">Show</button> </div> <div id="trDest2_details" class="details"> <p>show details</p> <button class="hideArrow">Hide</button> </div> <div id="trDest3" class="trDest"> <!-- Some content here --> <button class="expandArrow">Show</button> </div> <div id="trDest2_details" class="details"> <p>show details</p> <button class="hideArrow">Hide</button> </div>

Answer 2

There are two problems in your code...

First problem lies in your HTML structure or your JS.

$('.expandArrow, .hideArrow').on('click', function(){
   if($(this).hasClass('hideArrow'));
    $(this).closest('.trDest').toggleClass('visible-description', 'hideArrow').next().toggle('hideArrow');
});

You add your function to both arrows. And in that callback, you're looking for the closest .trDest element to clicked arrow.

So if the clicked arrow is the .expandArrow , then that element is found:

<div id="trDest1" class="trDest">
    <!-- Some content here -->
    <button class="expandArrow">Show</button>
</div>

But if the clicked element is .hideArrow , then there is no closest element with such class and the rest of your code doesn't do anything:

<div id="trDest2_details" class="details">
    <p>show details</p>
    <button class="hideArrow">Hide</button>    
</div>

Second one is in the part that toggles the class

toggleClass can take two parameters:

.toggleClass( className, state )

but you pass 'hideArrow' (a string) as a state. So it won't be false...

So how to do it properly?

This should do the trick:

$('.expandArrow').on('click', function () {
    $(this).closest('.trDest').addClass('visible-description').next().show();
});
$('.hideArrow').on('click', function () {
    $(this).closest('.details').hide().prev().removeClass('visible-description');
});

And even better?

The code above will work, but... I wouldn't use it, because the HTML structure isn't very semantic. You have two independent HTML tags, that describe one object. And you set classes on these tags to describe the state of that object.

My approach would be different. I would go for something like this:

<div class="trDest">
  <div class="header">
    <!-- Some content here -->
    <button class="expandArrow">Show</button>
  </div>
  <div class="details">
    <p>Some details...</p>
    <button class="hideArrow">Hide</button>
  </div>
</div>

And toggle the state class on the wrapping element.

$('.expandArrow, .hideArrow').on('click', function () {
    $(this).closest('.trDest').toggleClass('visible-description', $(this).hasClass('hideArrow'));
});

This way you have one tag for one object and there is a class that is describing its state. And as you can see, the JS code is much simpler in such approach.

Answer 3

You can try below code -

 $('.expandArrow, .hideArrow').on('click', function() { if ($(this).hasClass('expandArrow')) { $(this).parent().next().toggleClass('visible-description'); } else { $(this).parent().toggleClass('visible-description'); } });

 .details { display: none; } .visible-description.details { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="trDest1" class="trDest"> <!-- Some content here --> <button class="expandArrow">Show</button> </div> <div id="trDest2_details" class="details"> <p>show details</p> <button class="hideArrow">Hide</button> </div> <div id="trDest2" class="trDest"> <!-- Some content here --> <button class="expandArrow">Show</button> </div> <div id="trDest2_details" class="details"> <p>show details</p> <button class="hideArrow">Hide</button> </div> <div id="trDest3" class="trDest"> <!-- Some content here --> <button class="expandArrow">Show</button> </div> <div id="trDest2_details" class="details"> <p>show details</p> <button class="hideArrow">Hide</button> </div>