Multiple Toggles Almost like Tabs JavaScript/ CSS

Question

I want to create tabs that function like toggles, but instead only one toggle can be active at one time. The content of the tab also needs to be above the the tabs themselves. T

Answer 1

This is also tagged jquery so I'll just recommend that you include the jquery library and include:

$('.someclass').hide();

as the first line in the toggleMeMirror function.

Then, make sure that each of your looped content divs exist in the class "someclass".

like:

foreach($this as $that) {
    print "<div class='someclass'>$that</div>";
}

then

function toggleMeMirror(a){
    // hide all
    $('.someclass').hide();
    //  show one
    var e=document.getElementById(a);
    if(!e) return true;
        if(e.style.display=="none"){
            e.style.display="inline"
        } else {
            e.style.display="none"
        }
    return true;
}

Answer 2

You can try something like this DEMO

HTML Code

<div id="one"><img src='http://img.widgetbox.com/thumbs/302/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='50px' widht='50px' ></div><br>
<div id="two"><img src='http://ww2.valdosta.edu/~mecarter/Spongebob%20Reading.png' height='50px' widht='50px' ></div><br>
<div id="three"><img src='http://www.cliffdweller.com/blogPhotos/wrappingpaperbase/Spongebob%20Waving.png' height='50px' widht='50px' ></div><br><br>
<div id="thumb"><img src='http://img.widgetbox.com/thumbs/302/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='200px' widht='200px' ></div>

jQuery

$("#one").click(function() {
  $("#thumb").html("<img src='http://img.widgetbox.com/thumbs/302/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='200px' widht='200px' >");
});

$("#two").click(function() {
  $("#thumb").html("<img src='http://ww2.valdosta.edu/~mecarter/Spongebob%20Reading.png' height='200px' widht='200px' >");
 });

$("#three").click(function() {
   $("#thumb").html("<img src='http://www.cliffdweller.com/blogPhotos/wrappingpaperbase/Spongebob%20Waving.png' height='200px' widht='200px' >");
});