I've implemented a basic slideToggle functionality in jQuery. You can check out the code on JSFiddle here:
$(document).ready(function() {
$(".panel_button").on('click', function() {
$(".panel").slideUp();
var targetPanel = $(this).attr('data-target');
$(targetPanel).slideToggle(0);
$(this).toggleClass('active');
});
});body {
height: 500px;
}
.contents {
width: 100%;
height: 20%;
}
.buttons {
background-color: green;
float: left;
width: 100%;
}
.panel_button {
float: left;
width: 30%;
}
#panel1, #panel2, #panel3 {
background-color: blue;
float: left;
width: 100%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contents">
<div id="panel1" class="panel">
<div class="content_01a">Here goes content1a</div>
<div class="content_01b">Here goes content1b</div>
</div>
<div id="panel2" class="panel">
<div class="content_02a">Here goes content2a</div>
<div class="content_02b">Here goes content2b</div>
<div class="content_02c">Here goes content2c</div>
</div>
<div id="panel3" class="panel">
<div class="content_03a">Here goes content3a</div>
<div class="content_03b">Here goes content3b</div>
</div>
</div>
<div class="buttons">
<div class="panel_button" data-target="#panel1"> Button_01 </div>
<div class="panel_button" data-target="#panel2"> Button_02 </div>
<div class="panel_button" data-target="#panel3"> Button_03 </div>
</div>In the above code snippet, I have set up a mechanism to show/hide contents based on the clicked button. Everything is functioning properly at this stage.
My goal now is to alter the animation of the new "incoming" content once a button is pressed. Currently, when a button is clicked, the new content slides in from below and covers the previous
content</olde>. However, I desire that the transition between contents happens <strong>instantly</strong> upon clicking a <code>button0 for slideToggle, it's not achieving the desired outcome.
What changes should I make to my code to achieve this seamless content switch immediately upon button click?