Суть такова: При нажатии на Button выезжает контент, при нажатии на другой Button - первый контент скрывается, а второй выезжает - так оно и работает... Но нужно еще... При нажатии на тот же Button (2-й раз) - блок должен скрываться...как осуществить? :)
P.S.
Пробовал с второй кнопкой, у которой был display: none; - при нажатии они менялись, но так выходил очень большой блок и подлагивал JQuery
.
И таких блоков 3-4
$(document).ready(function() {
$(button).one('click', function() {
$('.news').slideUp('slow');
$(this).siblings(".news").slideToggle('slow');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bar">
<div class="text">
<p>
<h1>Lorem ipsum</h1>
</p>
</div>
<div class="news">
" Lorem ipsum dolor "
</div>
<div class="button ">
<button type="button">Button</button>
</div>
</div>
<div id="bar">
<div class="text">
<p>
<h1>Lorem ipsum</h1>
</p>
</div>
<div class="news">
" Lorem ipsum dolor "
</div>
<div class="button">
<button type="button">Button</button>
</div>
</div>
$(document).ready( function(){
$('.button').click(function(){
var block=$('.news').css('display');
if(block=='none') {
$('.news').slideUp('slow');
$(this).siblings('.news').slideToggle('slow');
}
else{
$('.news').slideUp('slow');
}
});
});
Все равно багует... если несколько таких новостей - оно видит только верхние ключи button u news