Display only the clicked div and not all on toggle - jQuery

Display only the clicked div and not all on toggle - jQuery
0

#1

Greetings to all campers,

I work on a webpage and have an issue with displaying a description div for a list item.

When I click on a specific li (e.g. Work abo…), I’d like to toggle only the div for that particular li, but they all get toggled instead and I don’t seem to find the problem.

li%20toggle%20div

Here is how the code looks for my webpage:

https://jsfiddle.net/t63L5py2/31/

Thanks in advance for any opinion.


#2

First you need to fix the following issue:

<div class="navigation">
  <a class="prev" id="prev_slide"> &#10094;</a>
  <a class="next" id="next_slide" "> &#10095;</a>
</div>

You have an extra double quote where it does not belong in the second anchor element. Fix that and test your code and again and update us on exactly what problem you want fixed.


#3

Thank you for the typo heads-up.

I corrected the fiddle:

https://jsfiddle.net/t63L5py2/47/

When I click on any list item inside the ul with the “more_services” id, I need to display the “secondary-services-description” div below the particular li that was clicked on.

The problem is that all the divs are displaying, not only the one that’s closest to the li that has been clicked on.


#4

You have some syntax issues you need to resolve first. Div elements should not be direct children of ul elements. Only li elements should be children of ul elements. I modified your html as below. You will need to change your CSS, so things look more presentable, but this html coupled with the JavaScript I show at the bottom of this post will get you started.

    <ul id="more_services">
      <li>
        <p>Work abo...</p>
      </li>
      <li>
        <p>Test text... </p>
        <div class="secondary-services-description">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </li>
      <li>
        <p>Just a sim... </p>
        <div class="secondary-services-description">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod .</p>
        </div>
      </li>
      <li>
        <p>Nothing h... </p>
        <div class="secondary-services-description">
          <p>Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris.</p>
        </div>
      </li>
    </ul>

JavaScript

$("#more_services li").click(function(e){
  $(".secondary-services-description").hide();
  $this = $(this).find(".secondary-services-description");
  $this.toggle();
});

#5

Thanks for your help! I managed to make it look ok and it works as it should now.