Question

I have jquery script which replaces a div when a href="#1" is selected. a href="#1" is also replaced by a href="#2" and vice versa. Here is the Jquery:

$('.child2, a[href="#1"]').hide()

$('#replacepagelinks a').click(function(){
    $(this).hide().siblings().show()
    var w = this.hash.replace('#', '');
    $('#parent div.child'+w).show().siblings().hide()
})

Here is the HTML.

<div id="parent">
<div class="child1">Child 1 Contents</div>
<div class="child2">Child 2 Contents</div>
</div>
<div id="replacepagelinks">
<a href="#1">Replace Child 1 with Child 2</a>
<a href="#2">Replace Child 2 with Child 1</a>
</div>

Here is the jfiddle working example http://jsfiddle.net/KaqZ5/

This works great for 1 instance. However i have these positioned multiple times in a jquery menu and this causes the problem. If i click the first menu item it reveals child1 and clicking a href="#1" to reveal child2 does so as expected. But now if i go into the second menu item child2 is still displaying (not child1 as it should!) as the jquery code has not been reset. Here is my html setup:

<div id=menu">
     <div class="menu_item">
          <a href="#" class="drop_menu"></a>
           <div id="parent">
              <div class="child1">Child 1 Contents</div>
              <div class="child2">Child 2 Contents</div>
           </div>
           <div id="replacepagelinks">
              <a href="#1">Replace Child 1 with Child 2</a>
              <a href="#2">Replace Child 2 with Child 1</a>
           </div>
     </div>
     <div class="menu_item">
          <a href="#" class="drop_menu"></a>
           <div id="parent">
              <div class="child1">Child 1 Contents</div>
              <div class="child2">Child 2 Contents</div>
           </div>
           <div id="replacepagelinks">
              <a href="#1">Replace Child 1 with Child 2</a>
              <a href="#2">Replace Child 2 with Child 1</a>
           </div>
     </div>
     <div class="menu_item"> etc.. </div>
</div>

In order to drop reveal each menu_item i have an a href="#" class="drop_menu which performs the menu drop jquery. Is there any way to have the same a href="#" class="drop_menu" link also reset the ‘replace div jquery script’ (top of this page) so that every time a menu item is selected child1 is the first to appear? Thanks heaps. Pia

Answer 1

If I understand correctly, you want to make sure the class=child1 and href=#2 are always shown when you click a drop_menu and the others are hidden? Then this would do the trick:

$(".drop_menu").on('click', function() {
    $(this).parent().find('.child1, a[href="#2"]').show().siblings().hide();
});