Show hidden contents at a particular div?

Question

I have a main menu. This main menu opens hidden divs that also contain inner menus that show and hide content.

You can see this in action here: http://shirleycollinsmovie.com/collins-html5/index.html#about

The user can select from the main menu and open up one of the hidden divs, and then explore the contents of the inner menu.

However when the user closes the hidden div and then opens a new one, then returns to the previous one again, instead of it displaying the contents from the beginning again it shows them exactly where they were when they left the hidden div previously. I want it to display the contents from the beginning again.

This is the code I have which shows the hidden divs from the main menu (I am using the same code for the inner menus as well):

$('#menu nav a').click(function() {
    $('.draggable').hide();
    $(this.getAttribute('href')).show()
});

<div id="menu">
  <h1>main header</h1>
  <nav>
    <a id="about-link" href="#about">About</a>        
    <a id="news-link" href="#news">News</a> 
    <a id="foundation-link" href="#foundation">Foundation</a>      
    <a id="contact-link" href="#contact-info">Contact</a>        
   </nav></div> 

 <div id="foundation" class="hidden draggable-scroll">

 <div id="foundation-nav" class="box-text">   
  <nav>   
    <a href="#the-story" class="current-foundation">The Story so Far</a>    
    <a href="#what">What will the Foundation do?</a> 
    <a href="#manifesto">The Manifesto</a>        
    <a href="#who">Who is the Foundation?</a>   
  </nav>
  </div>

 <div id="foundation-opening"  class="box-text foundation-info"> 
<h2>header </h2>
<p>
 </p></div>

 <div id="the-story" class="box-text foundation-info hidden"> 



<h2>The Story so far: </h2>
<p> 
 And she’s not done yet,</p>
</div>


 <div id="what" class="box-text foundation-info hidden">  

<p>
The Ballad of </p>

</div>

<div id="manifesto" class="box-text foundation-info hidden">
<h2>The proposed Manifesto: </h2>
<p>
The reason for the foundation to exist: </p>

</div>

<div id="who" class="box-text foundation-info hidden"> 
<h2>Who is the Foundation?</h2>
 <p> </p>

  </div>



  <div class="close-box"> 
  <a href="#">x</a></div>
  </div>

Perhaps there is a way to target the starting content from the href of the main menu?

Or is there a way within the jQuery to re-hide the hidden content when the users selects from the main menu again?

Here's where this has been answered before, hope it helps! http://stackoverflow.com/questions/10744299/scroll-back-to-the-top-of-div — Adam Rutherford, Jun 12 '14 at 16:15
For sure you can hide the content and start new when the same item is clicked but requires more code. I am sure someone will get on this, I got to go to lunch — Huangism, Jun 12 '14 at 16:16
You could take a look at [this question](http://stackoverflow.com/q/1225102), though that's probably overkill for what you describe. On a side note, have you considered [using tabs](http://api.jqueryui.com/tabs/)? — blgt, Jun 12 '14 at 16:42

Shaunak D · Accepted Answer · 2014-06-12T16:42:47.030

1

A simple workaround,

The following code finds first/beginning Menu Item - a:first selector and trigger click on it.

$('#menu nav a').click(function() {
    $('.draggable').hide();
    $(this.getAttribute('href')).show().find('nav a:first').click();

});

This would always open first <a> of <nav>.

It works with your site link. Tried out in console.

edited Jun 12 '14 at 16:42

answered Jun 12 '14 at 16:36

Shaunak D

20,588
10
46
79

Show hidden contents at a particular div?

1 Answers1