Hillel Garcia Hillel Garcia - 3 months ago 11
jQuery Question

Avoid to display 2 items at the same time with JQuery

Having 2 hidden boxes ("return_policy" and "risk_free") that are shown after the user clicks their proper buttons, How can avoid the 2 boxes to display at the same time?:

<style>
.info_dropdown { display: none; }
</style>

<button class="return_policy">30 DAY MONEY BACK GUARANTEE</button>
<button class="risk_free">100% RISK FREE PURCHASE</button>

<div class="info_dropdown" id="return_policy">
<p>Lorem Ipsum</p>
<p class="close_info">Close</p>
</div>

<div class="info_dropdown" id="risk_free">
<p>Lorem Ipsum</p>
<p class="close_info">Close</p>
</div>

<script>
$('.return_policy').click(function(){
$('#return_policy').slideToggle();
});

$('.risk_free').click(function(){
$('#risk_free').slideToggle();
});

//Close the proper info box
$('.close_info').click(function(){
$(this).parent().slideToggle();
});
</script>

Answer

UPDATED jsfiddle. You have some mistakes in your jquery code. return_policy and risk_free are id not class so you should use a # to get these elements with jquery

$('.return_policy').click(function(){
    $('#return_policy').slideToggle();
    $('#risk_free').css('display','none');
});

$('.risk_free').click(function(){
    $('#risk_free').slideToggle();
    $('#return_policy').css('display','none');
});