etux, vielen Dank für deine Inputs!
Habe es jetzt dank dir schlussendlich so gelöst:
HTML-Code:
<style>
.slider div {
background: #203a70;
padding: 10px;
position: absolute;
right: 0;
visibility: hidden;
opacity: 0;
transition: 0.6s;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-transition: 0.6s;
transform: translateX(300px);
-webkit-transform: translateX(300px);
-webkit-box-shadow: 0px 10px 8px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 10px 8px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 10px 8px 0px rgba(0, 0, 0, 0.25);
color: #fff;
}
div .appear {
visibility: visible;
opacity: 1;
transform: translateX(0);
-webkit-transform: translateX(0);
}
</style>
<button id="kontakt" class="btn btn-primary icon-contact">Kontakt</button>
<button id="news" class="btn btn-primary icon-news">News</button>
<button id="suche" class="btn btn-primary icon-search">Suche</button>
<div class="slider">
<div class="kontakt">Kontakt</div>
<div class="news">News</div>
<div class="suche">Suche</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( 'button' ).click( function() {
$class_value = '.' + $(this).attr('id');
$( '.slider' ).find( $class_value ).toggleClass( 'appear' );
$( '.slider' ).find( 'div' ).not( $class_value ).removeClass( 'appear' );
});
</script>
Macht nun genau das was ich gerne hätte.