I recently found a code that has what I need. I am developing a page with 3 buttons, each of them shows a content (a div) when clicked.
When I click the first button, as the div is displayed below, the other buttons are also pushed down. That is, they come down, but what I need is not the transition nor the buttons, just change the content.
Summary from context:
I need none of the buttons to go down when the other one fires and this slide transition is replaced by a fade.
Code:
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
$(".slidingDiv2").hide();
});
});
$(document).ready(function(){
$(".slidingDiv2").hide();
$(".show_hide2").show();
$('.show_hide2').click(function(){
$(".slidingDiv2").slideToggle();
$(".slidingDiv").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><ahref="#" class="show_hide">Teste 1</a>
<div class="slidingDiv">
<center><br><br>
Um teste inicial
</center>
</div>
<a href="#" class="show_hide2">Teste 2</a>
<div class="slidingDiv2">
<br><br><center>
Outro Teste
</center>
</div>