在多个div之间切换

Question

I have an issue. I want to toggle between many divs, while one shows the rest hide. This is what I have so far.

Thanks in advance!

<a href="#n" onclick="toggle_visibility('box1');">
    <div class="square img_1-1"></div>
</a>

<a href="#n" onclick="toggle_visibility('box2');">
    <div class="square img_1-2"></div>
</a>

<a href="#n" onclick="toggle_visibility('box3');">
    <div class="square img_1-3"></div>
</a>

    <div id="box1" style='display:none;'>
        <div class="trabajo">
            <p>box1</p>
        </div>
    </div>

    <div id="box2" style='display:none;'>
        <div class="trabajo">
            <p>box2</p>
        </div>
    </div>

    <div id="box3" style='display:none;'>
        <div class="trabajo">
            <p>box3</p>
        </div>
    </div>

<a href="#n" onclick="toggle_visibility('box4');">
    <div class="square img_2-1"></div>
</a>

<a href="#n" onclick="toggle_visibility('box5');">
    <div class="square img_2-2"></div>
</a>

<a href="#n" onclick="toggle_visibility('box6');">
    <div class="square img_2-3"></div>
</a>

    <div id="box4" style='display:none;'>
        <div class="trabajo">
            <p>box4</p>
        </div>
    </div>

    <div id="box5" style='display:none;'>
        <div class="trabajo">
            <p>box5</p>
        </div>
    </div>

    <div id="box6" style='display:none;'>
        <div class="trabajo">
            <p>box6</p>
        </div>
    </div>

Also, here is the Javascript. I'm using toggle_visibility(id) The problem is that it start to get weird when I hide one box and open another it opens both then it just gets weird. It leaves both open then closes one.

var prevId;

function toggle_visibility(id) {
    if(prevId && id !== prevId){
        $("#"+prevId).toggle();
    }
    var e = document.getElementById(id);

    $(e).toggle();
    prevId = id;

}

There's also another javascript code I tried before, this one works sorta fine, the only thing it doesn't do is toggle it just shows the work and doesn't hide it, although it does toggle between different work.

top.visible_div_id = 'box1';
function toggle_visibility(id) {
    var old_e = document.getElementById(top.visible_div_id);
    var new_e = document.getElementById(id);
    if(old_e) {
        console.log('old', old_e, 'none');
        old_e.style.display = 'none';
    }
    console.log('new', new_e, 'block');
    new_e.style.display = 'block';   
    top.visible_div_id = id;          
}

Answer 1

Instead of the onclick, I used the eventhandler on() (you should not inline-javascript). I coombine this with the data-attribute:

<a data-toggles="#box2">box 2</a>

And some changes to your javascript:

$('a.triggeringAnchor').on('click', function(e){
    e.preventDefault() // stop the anchor
    $('a.triggeringAnchor').hide(); // hide them all
    $( $(this).data('toggles') ).show(); // bring the one back in the one back
})

You could use the :not() selectors, but this is a bit more obvious :)
The trick here is the 'bring back' line. I use the value of the data-attribute as selector for the actual element we want back.

This code has a big advantage over yours. If you add 1 more element, your counter would be to know about this (could be done via .length() ), my code doesn't care. Everything gets hidden, and just that 1 will come back.

Answer 2

I think this jQuery Widget is exactly what you are looking for. Easy to implement and very usable. Plus, the jQuery API instructions make it a breeze to get onto your page.