I have a jquery script which replaces a div (child1 with child2) when a

Question

0

Asked: June 13, 20262026-06-13T07:54:21+00:00 2026-06-13T07:54:21+00:00

I have a jquery script which replaces a div (child1 with child2) when a

0

I have a jquery script which replaces a div (child1 with child2) when a href=”#1″ is selected. I have these arranged in a menu like so:

<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>

Here is the jquery:

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

Which hides the appropriate div+link.

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

Which replaces child1 with child2 div and also changes the a href link from #1 to #2. Here i would like <a href="#1">Replace Child 1 with Child 2</a> and <a href="#2">Replace Child 2 with Child 1</a> to be in separate classes so i can have them work as ‘next’ and ‘back’ links at either side of the page, like so:

<div id="replacepagelinks">
    <div class="pagelink_left">
       <a href="#2">Back</a>
    </div>
    <div class="pagelink_right">
       <a href="#1">Next</a>
    </div>
    <div class="clear"></div>
</div>

But my experience with jquery is extremely limited so i dont know exactly what i need to change.

I also have jquery which resets the divs so that every time a menu item is selected via <a href="#" class="drop_menu"></a> it always shows first child1 and the correct link to child2:

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

My primary question is that i would like to be able to have more than 2 div child’s but don’t know how to update my jquery to reflect that.

1.In child1 i would like ONLY <a href="#1">Replace Child 1 with Child 2</a>

2.In child2 i would like <a href="#2">Replace Child 2 with Child 1</a> AND <a href="#3">Replace Child 2 with Child 3</a>

3.In child3 i would like <a href="#3">Replace Child 3 with Child 2</a> AND <a href="#4">Replace Child 3 with Child 4</a>

4.In child4 i would like <a href="#4">Replace Child 4 with Child 3</a>AND <a href="#5">Replace Child 4 with Child 5</a>.

5.In child5 i would like ONLY <a href="#5">Replace Child 5 with Child 4</a>

So each page has a ‘next’ and ‘back’ link except for the first page which only has a ‘next’ link and the last page which only has a ‘back’ link.

To complicate things further 🙂 some menu items have 2 child div’s, some have 3 child div’s and some have 4 child div’s. In these cases i would like the final page (2, 3 and 4 respectively) to display only 1 link that goes back to the previous page.

Thanks for your help. Pia