Push a Collapse button through the menu

Question

On the page I’m developing, the contents are all hidden by the "Collapse" bootstrap class. As it is a Single Page, I would like my menu to go up to its respctive Section and then show the content without having to click the button.

I’ll put an example here:

<nav id="menu">
  <ul>
    <li><a href="#item1">Item 1</a></li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</nav>

<main>
<div class="container">
  <section id="item1">
    <a href="conteudo-item1" data-toggle="collapse">Saiba Mais</a>
    <div id="conteudo-item1" class="container collapse">
      Conteúdo...
    </div>
  </section>
</div>

I’m trying to do this using jQuery, but I’m not getting it. I have already used click(), triggle() and triggleHandler events().

Answer 1

I’m not sure I understand the question, but I’ll try to answer.

$(document).scroll(function () {
    var scroll = $(this).scrollTop();
    $('conteudo-item1').each(function () {
        var offset = $(this).parent().offset().top;
        if (scroll > offset) {
            $(this).collapse('show');
        } else {
            $(this).collapse('hide');
        }
    });
});