Toggle and scroll to anchor

Question

I need your directions on something :

I'm trying to create a page with toggled divs. I need them to open when I click on it, when I click on a link in the menu and when I click on this link from an other page. I also need that when I click on an anchor in the menu, it toggles the correct div and scroll to the anchor.

I tried something that works more or less :

• My first problem is that I have to click twice on a link for the animation to work. I found that the $("#").live('click', function() {..} ma be a solution, but I dont't know how to use it.

• Second problem, the animations don't work from a page to another

• Third problem, I think my code syntax is bad and can be optimised but I don't know how...

Here is my HTML :

    <header id="header">
  <!--Menu-->
  <nav>
    <ul id="menu">
      <li><a href="index.html"><h2>TITRE1</h2></a>
        <ul>
          <li><a class="ancre-head" href="index.html#E">E</a></li>
          <li><a class="ancre-head" href="index.html#F">F</a></li>
          <li><a class="ancre-head" href="index.html#G">G</a></li>
          <li><a class="ancre-head" href="index.html#H">H</a></li>
        </ul>
      </li>
      <li><a href="gp.html"><h2>TITRE2</h2></a>
        <ul>
          <li><a class="ancre-head" href="gp.html#A">A</a></li>
          <li><a class="ancre-head" href="gp.html#B">B</a>
            <ul>
              <li><a class="ancre" href="gp.html#B-01">B-01</a></li>
              <li><a class="ancre" href="gp.html#B-02">B-02</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</header>

<div class="toggle">
  <div id="A" class="toggle-head">
    <div class="toggle-head-content">
      <h3>A</h3>
    </div>
  </div>
  <div class="toggle-content">
    A
  </div>
</div>

<div class="toggle">
  <div id="B" class="toggle-head">
    <div class="toggle-head-content">
      <h3>B</h3>
    </div>
  </div>
  <div class="toggle-content">
    B
    <div id="B-01"></div>
    B-01
    <div id="B-02"></div>
    B-02
  </div>
</div>

And my JS :

jQuery(document).ready(function() {
  $('.toggle-content').hide();
  jQuery('.toggle-head').click(function() {
    $(this).siblings('.toggle-content').slideToggle('slow');
    $(this).toggleClass('clicked');
  });
  jQuery('a.ancre-head').click(function() {
    var hash = document.location.hash.replace('#', '');
    $('#' + hash).each(function() {
      if (hash.indexOf($(this).attr("href")) != 1 && $('#' + hash).siblings('.toggle-content').is(":hidden")) {
        $('#' + hash).siblings('.toggle-content').slideDown('slow');
        $('#' + hash).toggleClass('clicked');
        $('html, body').animate({
          scrollTop: $('#' + hash).offset().top - 20
        }, 500);
      } else if (hash.indexOf($(this).attr("href")) != 1 && $('#' + hash).siblings('.toggle-content').is(":visible")) {
        $('html, body').animate({
          scrollTop: $('#' + hash).offset().top - 20
        }, 500);
      }
    });
    return false;
  });
  jQuery('a.ancre').click(function() {
    var hash = document.location.hash.replace('#', '');
    $('#' + hash).each(function() {
      if (hash.indexOf($(this).attr("href")) != 1 && $('#' + hash).parent('.toggle-content').is(":hidden")) {
        $('#' + hash).parent('.toggle-content').slideDown('slow');
        $('#' + hash).parents().siblings('.toggle-head').toggleClass('clicked');
        $('html, body').animate({
          scrollTop: $('#' + hash).offset().top - 20
        }, 500);
      } else if (hash.indexOf($(this).attr("href")) != 1 && $('#' + hash).parent('.toggle-content').is(":visible")) {
        $('html, body').animate({
          scrollTop: $('#' + hash).offset().top - 20
        }, 500);
      }
    });
    return false;
  });
});

//SMOOTHSCROLL//
$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

I'll be happy if you can help me understand where I'm wrong !

Thanks !

Katapult

Answer 1

The below pure HTML/CSS solution answers all of your requirements, except for the animation. It uses a combination of CSS :active and :target pseudo classes to achieve the desired behaviour. The HTML had to be modified a bit too, in order to work. The bonus is, that these items are now also available via keyboard navigation :)

 .toggle-content > * { height: 0; overflow: hidden; } .toggle-head [id]:target, .toggle-head:focus .toggle-content > *, .toggle-head:target .toggle-content > * { height: auto; } 

 <header id="header"> <!--Menu--> <nav> <ul id="menu"> <li><a href="gp.html"><h2>TITRE2</h2></a> <ul> <li><a class="ancre-head" href="#A">A</a> </li> <li><a class="ancre-head" href="#B">B</a> <ul> <li><a class="ancre" href="#B-01">B-01</a> </li> <li><a class="ancre" href="#B-02">B-02</a> </li> </ul> </li> </ul> </li> </ul> </nav> </header> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <div class="toggle"> <div id="A" class="toggle-head" tabindex="0"> <div class="toggle-head-content"> <h3>A</h3> </div> <div class="toggle-content"> <p>A content</p> </div> </div> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor </p> <p> in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu </p> <p> fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat Lorem </p> <p> ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do </p> <p> eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing </p> <p> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <div class="toggle"> <div id="B" class="toggle-head" tabindex="0"> <div class="toggle-head-content"> <h3>B</h3> </div> <div class="toggle-content"> <p>B</p> <div id="B-01" tabindex="0">B-01</div> <div id="B-02" tabindex="0">B-02</div> </div> </div> </div>