Change transition and location of an action in jQuery

Question

I recently found a code that has what I need. I’m 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 right below, the other buttons are also taken down. I mean, they come down, but what I need is not the transition or the move down buttons, just change the content.

Summary from the context:

I need none of the buttons to drop when the other one is triggered and that 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>


<a href="#" class="show_hide">Teste 1</a>
<div class="slidingDiv">
<center><br><br>
    Um teste inicial
</center>
</div> &nbsp;&nbsp;&nbsp;&nbsp;


<a href="#" class="show_hide2">Teste 2</a>
<div class="slidingDiv2">
    <br><br><center>
        Outro Teste
    </center>
</div>

Answer 1

I believe that’s what you want:

https://jsfiddle.net/cm5ko9jf/2/