CODEWITHSUNDEEP
javascripthtmldropdown
Ddoouummbbiiaa
Ddoouummbbiiaa

Reputation: 27

JavaScript and HTML with dropdown

I'm working on a dropdown with javascript. My HTML does not work and I can't find the problem... I think I've done right but maybe it's the link who does not work.

$(document).ready(function() {
  $("article.hey > *:not(header)").hide();
  $("article.hey header").on("click", function() {
    $(this).nextAll("*").slideToggle();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <article class="hey">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac metus quis ante elementum tristique sit amet quis lorem. Fusce placerat dignissim nunc vitae consequat. In sagittis velit vitae erat faucibus, vitae condimentum risus luctus. Aliquam
      consequat est pellentesque viverra hendrerit. Duis tincidunt mi sem, et rhoncus ante consequat id. Sed ex est, pulvinar et mi eu, placerat tincidunt lacus. Praesent congue turpis mi, at vestibulum
    </p>
  </article>
</header>

Thanks!

Upvotes: 1

Views: 53

Answers (1)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

The structure of your HTML must be the header tag inside the article tag:

$(document).ready(function() {
  $("article.hey > *:not(header)").hide();
  $("article.hey header").on("click", function() {
    $(this).nextAll("*").slideToggle();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="hey">
  <header>I'm the header 'CLICK ME'</header>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac metus quis ante elementum tristique sit amet quis lorem. Fusce placerat dignissim nunc vitae consequat. In sagittis velit vitae erat faucibus, vitae condimentum risus luctus. Aliquam
    consequat est pellentesque viverra hendrerit. Duis tincidunt mi sem, et rhoncus ante consequat id. Sed ex est, pulvinar et mi eu, placerat tincidunt lacus. Praesent congue turpis mi, at vestibulum
  </p>
</article>

Upvotes: 2

Related Questions