Показать один div и скрыть любые открытые

Question

Я пытаюсь показать один div за раз, поэтому при нажатии кнопки он показывает, что div и скрывает остальных, если они видны. Я пробовал несколько примеров, но не смог. Код ниже скрывает все показанные divs одним щелчком мыши.

<% for(var i = 0; i < 3; i++){ %> 
     <button class="but<%= i %>" >Show Skeetchpad</button> 
     <div id="p<%=i%>" ></div> 

        <script> 
         $(document).ready(function(){ 
         $("#p<%= i %>").hide(); 
          $(".but<%= i %>").click(function(){ 

           if ($.trim($(this).text()) === 'Show Sketchpad') { 
            $(this).parent().siblings().hide(); 
            $("#p<%= i%>").load("sketch.jsp"); 
            $("#p<%= i %>").show("slow");          
            $(this).text('Hide Sketchpad').css("font-weight","bold"); 
           } else { 
            $(this).text('Show Sketchpad').css("font-weight","normal"); 
            location.reload(false); 
            $("#p<%= i %>").hide("slow"); 
           } 
           return false; 
          }); 
         }); 
        </script>  
        <hr> 
        <% 
         } 
        %> 

Answer 1

Добавьте следующий фрагмент кода в обработчике кнопки.

<%-- Get the class name of the button that is clicked --%> 
var buttonClass = $(this).attr('class'); 
<%-- Get the div ID corresponding to the button clicked. 
E.g. if the button clicked is but3, the corresponding div that needs to be shown 
is p3. The remaining ones should be hidden 
--%> 
var divId = "p" + buttonClass[buttonClass.length - 1]; 
<%-- Hide all the divs the IDs of which start with a 'p' --%> 
$("div[id^=p]").not(divId).hide(); 

Answer 2

$('button').on('click',function() { 
 
    var c = '.'+$(this).attr('class'); 
 
    $('div').not(c).hide(); 
 
    $(c).show(); 
 
})

div { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="div1">div1</button> 
 
<button class="div2">div2</button> 
 
<button class="div3">div3</button> 
 
<div class="div1">div1</div> 
 
<div class="div2">div2</div> 
 
<div class="div3">div3</div>