单击按钮即可隐藏许多div

Question

I have 6divs and i want on button click to hide five and show one, on other button click to hide five others and show one. I don't want to hide all them one by one. Is any way to hide all by ID in the same time: My html code:

<div id="ad1" style="display: none;">Div content 1</div>
<div id="ad2" style="display: none;">Div content 2</div>
<div id="ad3" style="display: none;">Div content 3</div>
<div id="ad4" style="display: none;">Div content 4</div>
<div id="ad5" style="display: none;">Div content 5</div>
<br/>
<button id='button1'>click1</button>
<button id='button2'>click2</button>
<button id='button3'>click3</button>
<button id='button4'>click4</button>
<button id='button5'>click5</button>

I tried something like this:

$("#button1").click(function () {
    $("#ad1").show();
    $("#ad2 #ad3 #ad4 #ad5").hide();
});

$("#button2").click(function () {
    $("#ad2").show();
    $("#ad1 #ad3 #ad4 #ad5").hide();
});

My jsfiddle : DEMO

Any help :)

Answer 1

Just separate the elements with , to select multiple elements:

$("#button1").click(function () {
    $("#ad1").show();
    $("#ad2, #ad3, #ad4, #ad5").hide();
});

$("#button2").click(function () {
    $("#ad2").show();
    $("#ad1, #ad3, #ad4, #ad5").hide();
});

Here is your updated FIDDLE

Answer 2

 $("#button1").click(function () { visible = $(".ads:visible"); next = visible.next(".ads"); debugger; if(next.length > 0 ){ next.show(); }else{ $(".ads").first().show(); } visible.hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ads" id="ad1">Div content 1</div> <div class="ads" id="ad2" style="display: none;">Div content 2</div> <div class="ads" id="ad3" style="display: none;">Div content 3</div> <div class="ads" id="ad4" style="display: none;">Div content 4</div> <div class="ads" id="ad5" style="display: none;">Div content 5</div> <br/> <button id='button1'>click1</button>