CODEWITHSUNDEEP
javascriptjquery
user2252219
user2252219

Reputation: 865

Jquery slide toggle not showing content on click

When I click on More Information, it changes to Less Information but the content under doesn't slide toggle in.

https://jsfiddle.net/n1gLn63y/

$(document).ready(function() {
  $(".content").hide();
  $(".toggle").on("click", function() {
    var txt = $(".content").is(':visible') ? 'More Information' : 'Less Information';
    $(".toggle").text(txt);
    $(".toggle").toggleClass('active');
    $(this).next('.content').slideToggle(450);
    e.stopPropagation();
  });
});

EDIT: Include relevant html from fiddle

<div class="description">

  <div class="descriptionTitle">
    <p class="Title"> KITAI / SELF-DIAGNOSIS </p>
    <p class="toggle">More Information</p>
  </div>

  <div class="content">
    content here
  </div>
</div>

Upvotes: 0

Views: 118

Answers (3)

Ruben Yeghikyan
Ruben Yeghikyan

Reputation: 497

$(this).next('.content').slideToggle(450);

that element do not have next element with content class, But its parent have,So:

$(document).ready(function() {
  $(".content").hide();
  $(".toggle").on("click", function(e) {
    e.stopPropagation();
    var txt = $(".content").is(':visible') ? 'More Information' : 'Less Information';
    $(".toggle").text(txt);
    $(".toggle").toggleClass('active');

    $(this).parent().next('.content').slideToggle(450);
  });
});

https://jsfiddle.net/n1gLn63y/2/

Upvotes: 1

officert
officert

Reputation: 1232

https://jsfiddle.net/officert/h7w40494/

$(document).ready(function() {
  $(".content").hide();
  $(".toggle").on("click", function() {
    var txt = $(".content").is(':visible') ? 'More Information' : 'Less   Information';
  $(".toggle").text(txt);
  $(".toggle").toggleClass('active');
  $('.content').slideToggle(450); //this was the problem
  e.stopPropagation();
});

where you were doing $(this).next('.content').slideToggle(450); was the issue. In this case $(this).next('.content') means get the sibling element with class .content, but the element with .content is not a sibling.

Upvotes: 1

fdomn-m
fdomn-m

Reputation: 28621

$(this).next doesn't find .content as it's not a sibling.

.next only finds elements that have the same parent (siblings).

Try: 

$(this).closest(".descriptionTitle").next('.content').slideToggle(450);

or rearrange your html

Upvotes: 1

Related Questions