CODEWITHSUNDEEP
javascriptjqueryhtml
Ploni Almoni
Ploni Almoni

Reputation: 15

Hide/show div with link

I'm trying to use jQuery to hide and show a div when the link in inside the a li tag is clicked, however I can't get the DOM element. Ousite the ul >li the script it working fine 

  <a class="showSingle " >All Test </a> //Work Fine


$(function() {
  //   $('.showSingle ul.list-inline li a').click(function () {
  $('.showSingle ').click(function() {
    $(this).siblings('.targetDiv ').slideToggle('fast');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-inline text-center">
  <li>
    <a class="showSingle">View next </a><i class="fas fa-arrow-circle-down"></i>
  </li>

i have add jsfiddler to explain the hole issue https://jsfiddle.net/mpef13qu/4/

Upvotes: 1

Views: 101

Answers (3)

zedling
zedling

Reputation: 637

I don't think there is anything wrong, you were just missing the target :/

UPDATE: I've changed the code snippet

$(function () {
    $('.showSingle').click(function(e) {
        e.preventDefault();
        $(this).parents("ul")
               .siblings('.targetDiv')
               .slideToggle('fast');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul class="list-inline text-center">
     <li>
        <a class="showSingle">View next </a>
        <i class="fas fa-arrow-circle-down"></i>
     </li>
  </ul>

  <div class="targetDiv" style="display: none">Some text</div>
</div>

<div>
  <ul class="list-inline text-center">
     <li>
        <a class="showSingle">View next </a>
        <i class="fas fa-arrow-circle-down"></i>
     </li>
  </ul>

  <div class="targetDiv" style="display: none">Some text</div>
</div>

<div>
  <ul class="list-inline text-center">
     <li>
        <a class="showSingle">View next </a>
        <i class="fas fa-arrow-circle-down"></i>
     </li>
  </ul>

  <div class="targetDiv" style="display: none">Some text</div>
</div>

<div>
  <ul class="list-inline text-center">
     <li>
        <a class="showSingle">View next </a>
        <i class="fas fa-arrow-circle-down"></i>
     </li>
  </ul>

  <div class="targetDiv" style="display: none">Some text</div>
</div>

<div>
  <ul class="list-inline text-center">
     <li>
        <a class="showSingle">View next </a>
        <i class="fas fa-arrow-circle-down"></i>
     </li>
  </ul>

  <div class="targetDiv" style="display: none">Some text</div>
</div>

here is the link

Upvotes: 1

Pixelomo
Pixelomo

Reputation: 6737

If the target is outside the ul it's not a sibling it's more like an uncle or something ;) so $(this).siblings wont work

Try this:

$('.showSingle').click(function(e){
    e.preventDefault();
    $('.targetDiv').slideToggle('fast')
})

Updated answer based on your markup

Since you have multiple toggle triggers and you only want to toggle the target directly after a certain trigger you can make use of $(this)

But you need to chain a few other jQuery functions to get up to the level where you can target the next target.

$('this').parent().parent().next('.targetDiv')

.next() is better than .siblings() in this situation since it returns the next sibling matching the .targetDiv selector

Here's the complete code:

 $(document).ready(function () {
    $('.showSingle').click(function(e) {
        e.preventDefault();
        $('this').parent().parent().next('.targetDiv').slideToggle('fast');
    });
 });

Updated fiddle https://jsfiddle.net/ywsmgd5c/

Upvotes: 1

Dan Brandt
Dan Brandt

Reputation: 615

For not reloading page <a href="#"> must be written. I've made demo for you, see it, @Ploni Almoni

Upvotes: -1

Related Questions