Toggle show/hide html content

Question

I'm trying to create a script/flow. I'd like to use jQuery to swap html elements (12 total divs) and stay in one, centered and responsive section element. The first div is visible and the rest hidden. In each div, and not in a static button list, there would be links that let you hide the current div, and unhide another div based on its id.

JQuery Toggle seems to be the most easy, but I'm not figuring out how to toggle more than 2 elements. I'm open to any solutions, however.

<section>
<div id="a">
    <p>content here</p>
        <div class="links">
            <a href="#" id="b-link">b</a> <a href="#" id="c-link">c</a>
        </div>
</div>

<div class="hidden" id="b">
    <p>content here</p>
        <div class="links">
            <a href="#" id="a-link">a</a> <a href="#" id="c-link">c</a> 
<a href="#" id="d-link">d</a>
        </div>
</div>

<div class="hidden" id="c">
    <p>content here</p>
        <div class="links">
            <a href="#" id="a-link">a</a> <a href="#" id="b-link">b</a>
        </div>
</div>

<div class="hidden" id="d">
    <p>content here</p>
        <div class="links">
            <a href="#" id="a-link">c</a> <a href="#" id="b-link">a</a>
        </div>
</div>
</section>

Answer 1

Maybe this link can help you to choose the selector for all elements except the selected and then apply the jquery toggle

How do I use jQuery to select all children except a select element

Answer 2

This works as you have requested, I've made a few changes to the code.

The buttons have a custom attribute for which corresponds to the id of the panel which they display. This then toggles the class .active which shows the panel via CSS . Panels are by default hidden until they are 'active'.

The jquery is pretty straight forward, attaching a click event to any button with the class .panel-switch . It is fully commented below. My preference is to use CSS but instead of adding a class you could simply .toggle() the DOM elements using the same selection method.

Let me know if this wasn't what you were hoping for.

---

Demo

 // Add click event to the buttons with class panel-switch $(".panel-switch").click(function() { // Hide current active panel $(".panel.active").removeClass("active"); // Activate chosen panel $(".panel#" + $(this).attr("for")).addClass("active"); }); 

 .panel { display: none; } .panel.active { display: inherit; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section> <div class="panel active" id="a"> <p>Panel A</p> <div class="links"> <button class="panel-switch" for="b">b</button> <button class="panel-switch" for="c">c</button> </div> </div> <div class="panel" id="b"> <p>Panel B</p> <div class="links"> <button class="panel-switch" for="a">a</button> <button class="panel-switch" for="d">d</button> </div> </div> <div class="panel" id="c"> <p>Panel C</p> <div class="links"> <button class="panel-switch" for="a">a</button> <button class="panel-switch" for="b">b</button> </div> </div> <div class="panel" id="d"> <p>Panel D</p> <div class="links"> <button class="panel-switch" for="c">c</button> <button class="panel-switch" for="a">a</button> </div> </div> </section>