Aisha Salman Aisha Salman - 4 months ago 11
HTML Question

section replace with another section in jquery

I've two sections with different ids, first is id="nature" and second section is of id="birdy".Both sections contains carousel in it but I kept one section hidden.

Buttons and carousel

I've applied this jquery code to replace sections on click.When I click on bird button, second section get replaced by first section successfully.But when I click back on nature button nothing happens.
What I want is when the page is set to second section (id="birdy"), on click to the nature button it will show first section(id="nature") again.
Please help me!

HTML:

<section id="nature">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="one" src="img/page.jpg" alt="...">
<div class="carousel-caption">
pic1
</div>
</div>
<div class="item">
<img class="two" src="img/parallax.jpg" alt="...">
<div class="carousel-caption">
pic2
</div>
</div>

<div class="item">
<img class="three" src="img/classic.jpg" alt="...">
<div class="carousel-caption">
pic3
</div>
</div>
</div>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>

<section id="birdy">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
<li data-target="#carousel-example-generic" data-slide-to="5"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="one" src="Bimgs/file.jpeg" alt="...">
<div class="carousel-caption">
pic1
</div>
</div>
<div class="item">
<img class="two" src="Bimgs/file2.jpeg" alt="...">
<div class="carousel-caption">
pic2
</div>
</div>

<div class="item">
<img class="three" src="Bimgs/file3.jpeg" alt="...">
<div class="carousel-caption">
pic3
</div>
</div>

<div class="item">
<img class="three" src="Bimg/.jpeg" alt="...">
<div class="carousel-caption">
pic4
</div>
</div>

<div class="item">
<img class="three" src="img/classic.jpg" alt="...">
<div class="carousel-caption">
pic5
</div>
</div>

<div class="item">
<img class="three" src="img/classic.jpg" alt="...">
<div class="carousel-caption">
pic6
</div>
</div>
</div>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>

<!-- button -->
<div class="container ntr-btn">
<a href="#" class="btn btn-primary btn-lg">NATURE</a>
</div>
<div class="container bird-btn">
<a href="#" class="btn btn-primary btn-lg">Birds</a>
</div>


css:

#birdy {
display: none;
}


Jquery:

<script type="text/javascript">
$(document).ready(function() {
$('.bird-btn').click(function(e) {
/* Act on the event */
$('#birdy').css('display', 'initial');
$('#nature').replaceWith('<section id="birdy"></section>');
});
$('.ntr-btn').click(function(e) {
/* Act on the event */
$('#birdy').css('display', 'none');
$('#birdy').replaceWith('<section id="nature"></section>');

});
});
</script>

Answer

Have you tried simplifying your structure? Instead of manipulating the DOM by inserting and removing elements, you could just show and hide your sliders:

HTML - Add a generic class to your buttons:

<div class="container ntr-btn slide-selector">
    <a href="#" class="btn btn-primary btn-lg">NATURE</a>
</div>
<div class="container bird-btn slide-selector">
  <a href="#" class="btn btn-primary btn-lg">Birds</a>
</div>

JQuery - Show and hide your sliders accordingly:

$('.slide-selector').click(function(){
    if($(this).hasClass('ntr-btn')){
        $('#nature').show();
        $('#birdy').hide();
    } else if ($(this).hasClass('bird-btn')){
        $('#birdy').show();
        $('#nature').hide();
    }
});