Show/Hide Div Combinations jQuery

Question

UPDATE: Working answer.

This is quite a complicated question about jQuery/JS - I've found a post that addresses a similar issue here, but I'm not using raw html or a tags, so the structure of the code is quite different.

Basically I have a list of divs that need to be hidden on page load, and then I need to display each div when a trigger element is clicked. The catch is that I need to hide all of the other divs when clicking different trigger elements. Obviously display: none; will need to be present on page load but the jQuery is beyond my current knowledge.

Example:

When this div is clicked

<div id="div1trigger">View Div 1 Contents</div>

this div is shown:

<div id="div1">Div 1 Content Here</div>

I have this working using this JS:

<script>
jQuery("#div1trigger").click(function(){
    jQuery("#div1").toggle();
});
</script>

Pretty simple use of .toggle() I know, but this is where is gets complicated, I have 5 trigger divs and 5 content divs in total, each of them needs to display their corresponding div and hide all of the other divs at the same time.

I was thinking something like the following:

<script>
jQuery("#div1trigger").click(function(){
    jQuery("#div1").toggle();
        jQuery("#div2, #div3, #div4, #div5").hide();

});
</script>

and then this ^ 5 times over to control each trigger div (although I am almost certain there is a cleaner/more 'correct' solution to this issue).

Please consider that all trigger div's are labelled by 'divnumbertrigger' such as #div2trigger; and all content divs are labelled 'divnumber' such as #div2.

Lastly for visual reference here is a screenshot of the frontend to help visualise the usage, all content divs use the same area of the page (green box) and all of the 'View' buttons (inside red box) are the div triggers:

Can anyone provide me with a workable solution/correct method of achieving this?

Answer 1

Use class fundamental here, so you can do this as:

<div id="div1" class="contentDivs">Div 1 Content Here</div>
<script>jQuery("#div1trigger").click(function() {jQuery("contentDivs").hide();
jQuery("#div1").show();});</script>

So, we are hiding all the divs and then display only the require div.

Thanks

Answer 2

to select all divs that are not #div1 you can use css not selector in jquery like this and then hide/toggle it.

    jQuery("#parentcontainer div:not(#div1)").hide();

$("#div1trigger").click(function(){
    $("#div1").toggle();
    $("#parentcontainer div:not(#div1)").hide();
});
$("#div2trigger").click(function(){
    $("#div2").toggle();
    $("#parentcontainer div:not(#div2)").hide();
});
$("#div3trigger").click(function(){
    $("#div3").toggle();
    $("#parentcontainer div:not(#div3)").hide();
});
$("#div4trigger").click(function(){
    $("#div4").toggle();
    $("#parentcontainer div:not(#div4)").hide();
});
$("#div5trigger").click(function(){
    $("#div5").toggle();
    $("#parentcontainer div:not(#div5)").hide();
});

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1trigger">Div 1 Trigger</div>
<div id="div2trigger">Div 2 Trigger</div>
<div id="div3trigger">Div 3 Trigger</div>
<div id="div4trigger">Div 4 Trigger</div>
<div id="div5trigger">Div 5 Trigger</div>

<div id='parentcontainer'>
  <div id="div1" class='hide'>div 1 display</div>
  <div id="div2" class='hide'>div 2 display</div>
  <div id="div3" class='hide'>div 3 display</div>
  <div id="div4" class='hide'>div 4 display</div>
  <div id="div5" class='hide'>div 5 display</div>
</div>

Answer 3

The cleanest way to do that is through data-attributes. Linking from trigger to div - this gives you one listener for multiple trigger-div pairs.

For HTML you go like this:

<div class="divtrigger" data-div="#div1">Div 1 Trigger</div>
<div class="divtrigger" data-div="#div2">Div 2 Trigger</div>
<div class="divtrigger" data-div="#div3">Div 3 Trigger</div>
<div class="divtrigger" data-div="#div4">Div 4 Trigger</div>
<div class="divtrigger" data-div="#div5">Div 5 Trigger</div>

With JavaScript is one listener:

<script>
$(".divTrigger").click(function(){

    $($(this).attr('data-div')).toggle();
});
</script>

Answer 4

You can extract the id of the clicked trigger using

var divId = $(this).attr('id');

then you can extract the number part from id using

var divId = $(this).attr('id');

And finally use it to hide all other div and toggle the required div

$("#parentcontainer div:not(#div" + divNum + ")").css('display', 'none');
$("#div" + divNum).toggle();

Here's an example

$(".trig").click(function(){
    var divId = $(this).attr('id');
    var divNum = divId.match(/\d+/);
    $("#parentcontainer div:not(#div" + divNum + ")").css('display', 'none');
    $("#div" + divNum).toggle();
});

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1trigger" class="trig">Div 1 Trigger</div>
<div id="div2trigger" class="trig">Div 2 Trigger</div>
<div id="div3trigger" class="trig">Div 3 Trigger</div>
<div id="div4trigger" class="trig">Div 4 Trigger</div>
<div id="div5trigger" class="trig">Div 5 Trigger</div>

<div id='parentcontainer'>
  <div id="div1" class='hide'>div 1 display</div>
  <div id="div2" class='hide'>div 2 display</div>
  <div id="div3" class='hide'>div 3 display</div>
  <div id="div4" class='hide'>div 4 display</div>
  <div id="div5" class='hide'>div 5 display</div>
</div>