How to toggle close all divs when another div is opened

Question

I have a long streak of divs with the following structure:

<div id="income">
<h5 onclick="toggle_visibility('incometoggle');">INCOME</h5>
<div id="incometoggle">
        <h6>Income Total</h6> 
</div>
</div>

<div id="income2">
<h5 onclick="toggle_visibility('incometoggle2');">INCOME2</h5>
<div id="incometoggle2" style="display:none;">
        <h6>Income Total2</h6> 
</div>
</div>

<div id="income3">
<h5 onclick="toggle_visibility('incometoggle3');">INCOME3</h5>
<div id="incometoggle3" style="display:none;">
        <h6>Income Total3</h6> 
</div>
</div>

I have this code to make them open and close:

function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') e.style.display = 'block';
else e.style.display = 'none';
}

At site load, the first div is opened, the rest is closed.

http://jsfiddle.net/txa2x9qq/3/

How can I make the first div close when the second one is opened, and so on - to have only one opened at a time?

Thank you

Answer 1

You can use jQuery Start with Selector to hide all div starting with incometoggle and use not() to exclude the current div

See below function

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if (e.style.display == 'none') e.style.display = 'block';
    else e.style.display = 'none';
    // hide all div except current
    $('div[id^=incometoggle]').not('#'+id).hide();
}

DEMO

EDIT - you can write whole logic in jQuery only, just bind click event to h5 elements and show / hide div next to it using toggle . And hide all div except current using jQuery Start with Selector

$(function() {
    $('h5').click(function(){
      var incomeDiv = $(this).next('div');
      $(incomeDiv).toggle();        
      $('div[id^=incometoggle]').not(incomeDiv).hide();
   });
});

DEMO Using JQuery

Answer 2

This way you just open the next on the close of the previus

function toggle_visibility(id,next) {    
    var e = document.getElementById(id);
    if (e.style.display == 'none') e.style.display = 'block';
    else e.style.display = 'none';

    if (next != undefined)
    {
        toggle_visibility(next);
    }
}

call it like:

<h5 onclick="toggle_visibility('incometoggle','incometoggle2');">INCOME</h5>

http://jsfiddle.net/txa2x9qq/3/

Answer 3

Using just Vanilla Javascript , like you're actually doing at the moment:

function toggle_visibility(id) {
    // Your clicked element
    var e = document.getElementById(id);

    // List containing all the divs which id starts with incometoggle.
    var allDivs = document.querySelectorAll('div[id^=incometoggle]');

    // Loop through the list and hide the divs, except the clicked one.
    [].forEach.call(allDivs, function(div) {  
        if (div != e) {
            div.style.display = 'none';
        }
        else {
            e.style.display = e.style.display == 'none' ? 'block' : 'none';
        }
    });
}

Demo

Answer 4

You can use jQuery more easily:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
     function toggle_visibility(id) {
        $("div[id^='incometoggle']").hide();
        $('#'+id).show();
     }   
</script>

Answer 5

I would approach it slightly differently and use a class along with a jquery selector -

<div id="income">
    <h5 onclick="toggle_visibility('incometoggle');">INCOME</h5>
    <div id="incometoggle" class="income-total">
       <h6>Income Total</h6> 
    </div>
</div>

...

function toggle_visibility(id) {

    // hide all divs with class income-total
    $('.income-total').hide();

    // show the desired div
    $('#' + id).show();

}

Answer 6

If you want to do in pure java script then this solution will work for you.

<div id="income">
<h5 onclick="toggle_visibility('incometoggle');">INCOME</h5>
    <div id="incometoggle" class="income">
            <h6>Income Total</h6> 
    </div>
</div>

<div id="income2">
<h5 onclick="toggle_visibility('incometoggle2');">INCOME2</h5>
    <div id="incometoggle2" style="display:none;" class="income">
            <h6>Income Total2</h6> 
    </div>
</div>

<div id="income3">
<h5 onclick="toggle_visibility('incometoggle3');">INCOME3</h5>
    <div id="incometoggle3" style="display:none;" class="income">
            <h6>Income Total3</h6> 
    </div>
</div>




function toggle_visibility(id) {
    var e = document.getElementById(id);
    var myClasses = document.querySelectorAll('.income'),
    i = 0,
    l = myClasses.length;

    for (i; i < l; i++) {
       myClasses[i].style.display = 'none';
    }
    if (e.style.display == 'none') e.style.display = 'block';

}

DEMO