Sir.Lich Sir.Lich - 2 months ago 11
jQuery Question

How can I toggle hidden/unhidden in Bootstrap without using toggle

I am well on my way to making my first Bootstrap website, and I recently ran into the first problem that google couldn't help me with.

I am searching for a way to set div elements to hidden/unhidden without the use of toggle. I have a pretty nice website going, and it has three large "buttons" created from some evenly spaced photos. I have three divs, each default hidden. Clicking on each photo should unhide a corresponding div, while insuring the other two are hidden. For example, clicking on "3D modeling"-image should toggle it either hidden/unhidden, while also insuring my other two portfolio sections are still closed.

I can easily handle the clicked-upon section by using toggle, but its not so simple when handling the other two. For example, all three start closed, (C C C) I then click the first one (O C C) then the second one (O O C). This means both of them are open.

This is just psudo-code, but this is more or less what I want:

onImageOneClick{
DivOne.setHidden(false);
DivTwo.setHidden(true);
DivThree.setHidden(true);
}

onImageTwoClick{
DivOne.setHidden(true);
DivTwo.setHidden(false);
DivThree.setHidden(true);
}

onImageTwoClick{
DivOne.setHidden(true);
DivTwo.setHidden(true);
DivThree.setHidden(false);
}


This is instead my current code:

<script>
$("#thumb1").click(function(){
$("#3DModel").toggleClass("hidden unhidden");
});
$("#thumb2").click(function(){
$("#DigitalArt").toggleClass("hidden unhidden");
});
$("#thumb3").click(function(){
$("#WebDesign").toggleClass("hidden unhidden");
});
</script>

Answer

Let's say the div's you want to show and hide have a .showable class, and that .hidden class hides the element (I don't think you need both hidden and unhidden classes):

<script>
$("#thumb1").click(function(){
    $(".showable").addClass("hidden");
    $("#3DModel").removeClass("hidden");

});
$("#thumb2").click(function(){ 
    $(".showable").addClass("hidden");
    $("#DigitalArt").removeClass("hidden");
});
$("#thumb3").click(function(){
    $(".showable").addClass("hidden");
    $("#WebDesign").removeClass("hidden");
});
</script>

In every click, you just hide all the elements and then show (by removing .hidden) the element you want to show. I think this is that you want to achieve in your pseudo-code, but even if I understood bad and you need a different solution, I think $.addClass() and $.removeClass() will serve you.