Скрыть много divs с кнопкой на кнопке

Question

У меня есть 6divs, и я хочу на кнопку, чтобы скрыть пять и показать один, на другой кнопке, чтобы скрыть пять других и показать один. Я не хочу прятать их по одному. Есть ли способ, чтобы скрыть все от ID в то же время: Мой HTML-код:

<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> 

Я пытался что-то вроде этого:

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

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

Мой jsfiddle: DEMO

Любая помощь :)

Answer 1

Просто выделите элементы с помощью ,, чтобы выбрать несколько элементов:

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

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

Вот ваш обновленный FIDDLE

Answer 2

$("#button1").click(function() { 
 
    visible = $(".ads:visible"); 
 
    next = visible.next(".ads"); 
 
    debugger; 
 
    if(next.length > 0){ 
 
    \t 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>