JavaScript and HTML with dropdown

Question

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!

what doesn't work? What link may be not working? What exactly are you going to achieve (that for sure is not a dropdown) — user2399035
– user2399035, Commented Oct 3, 2018 at 8:37
IT's actually not a dropdown. I don't know how to say it. It's when you click on the header, the text should drop down.. Hope you understand! :) — Ddoouummbbiiaa
– Ddoouummbbiiaa, Commented Oct 3, 2018 at 8:37
header is parent of article.hey but you used $("article.hey header") — Mohammad
– Mohammad, Commented Oct 3, 2018 at 8:39

Zakaria Acharki · Accepted Answer · 2018-10-03 08:40:36Z

2

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>

answered Oct 3, 2018 at 8:40

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ddoouummbbiiaa Over a year ago

Thank you so much! So the article will be the parent. Now i understand!

Collectives™ on Stack Overflow

JavaScript and HTML with dropdown

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related