Numerous links were chosen and multiple div elements were displayed on the screen

Question

Numerous links were chosen and multiple div elements were displayed on the screen

Currently, I have a setup where selecting one div will show its content. However, I am looking to enhance this by allowing multiple divs to be displayed simultaneously. For example, if 'Div 1' is selected and shown, I want the content of 'Div 2' to appear when it's clicked without hiding 'Div 1'. Can anyone provide assistance with achieving this?

HTML

<div class="btn-group" role="group" aria-label="">
  <a id="showAll" class="btn btn-primary">Show All Elements</a>
  <a class="showSingle btn btn-primary" data-target="1">Div 1</a>
  <a class="showSingle btn btn-primary" data-target="2">Div 2</a>
  <a class="showSingle btn btn-primary" data-target="3">Div 3</a>
  <a class="showSingle btn btn-primary" data-target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>

jQuery

$('.showSingle').click(function() {
    $('.targetDiv').hide();

    $('#div' + $(this).attr('data-target')).show();
    $('.btn').removeClass('active');
    $(this).addClass('active');
});

Example on jsFiddle

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

If you're looking for a straightforward toggle function, here's how I achieved it by adapting your example:

JS

$('#showAll').click(function() {
    $('.btn').addClass('active');
    $('.targetDiv').show();
    $(this).addClass('active');
});

$('.showSingle').click(function() {
    $('#div' + $(this).attr('data-target')).toggle();
    $(this).toggleClass('active');
});

Markup

<div class="btn-group" role="group" aria-label="">
  <a id="showAll" class="btn btn-primary active">All Items</a>
  <a class="showSingle btn btn-primary active" data-target="1">Div 1</a>
  <a class="showSingle btn btn-primary active" data-target="2">Div 2</a>
  <a class="showSingle btn btn-primary active" data-target="3">Div 3</a>
  <a class="showSingle btn btn-primary active" data-target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv">Lorem Ipsum1</div>
<div id="div2" class="targetDiv">Lorem Ipsum2</div>
<div id="div3" class="targetDiv">Lorem Ipsum3</div>
<div id="div4" class="targetDiv">Lorem Ipsum4</div>

Fiddle: https://jsfiddle.net/hescano/42uwvhx4/2/

Take note of the usage of .toggleClass() and .toggle() to achieve the desired functionality.

Answer 2

If you're looking for a straightforward toggle function, here's how I achieved it by adapting your example:

JS

$('#showAll').click(function() {
    $('.btn').addClass('active');
    $('.targetDiv').show();
    $(this).addClass('active');
});

$('.showSingle').click(function() {
    $('#div' + $(this).attr('data-target')).toggle();
    $(this).toggleClass('active');
});

Markup

<div class="btn-group" role="group" aria-label="">
  <a id="showAll" class="btn btn-primary active">All Items</a>
  <a class="showSingle btn btn-primary active" data-target="1">Div 1</a>
  <a class="showSingle btn btn-primary active" data-target="2">Div 2</a>
  <a class="showSingle btn btn-primary active" data-target="3">Div 3</a>
  <a class="showSingle btn btn-primary active" data-target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv">Lorem Ipsum1</div>
<div id="div2" class="targetDiv">Lorem Ipsum2</div>
<div id="div3" class="targetDiv">Lorem Ipsum3</div>
<div id="div4" class="targetDiv">Lorem Ipsum4</div>

Fiddle: https://jsfiddle.net/hescano/42uwvhx4/2/

Take note of the usage of .toggleClass() and .toggle() to achieve the desired functionality.

Answer 3

Answer №2

Perhaps this solution will get the job done:

$('#showAll').click(function() {
$('.btn').removeClass('active');
$('.targetDiv').show();
$(this).addClass('active');
    });

    $('.showSingle').click(function() {
  $('.targetDiv').hide();


  var targetHeight = $(this).attr('data-target');

  $(".targetDiv").each(function(){
    var height = $(this).attr('data-value');
    if(height <= targetHeight){
      $(this).show();
    }


  });

  $('.btn').removeClass('active');
  $(this).addClass('active');
    });

You could consider updating the HTML for the target divs like this instead of parsing the id values:

<div id="div1" class="targetDiv" data-value="1">Lorum Ipsum1</div>
<div id="div2" class="targetDiv" data-value="2">Lorum Ipsum2</div>
<div id="div3" class="targetDiv" data-value="3">Lorum Ipsum3</div>
<div id="div4" class="targetDiv" data-value="4">Lorum Ipsum4</div>

Answer 4

Perhaps this solution will get the job done:

$('#showAll').click(function() {
$('.btn').removeClass('active');
$('.targetDiv').show();
$(this).addClass('active');
    });

    $('.showSingle').click(function() {
  $('.targetDiv').hide();


  var targetHeight = $(this).attr('data-target');

  $(".targetDiv").each(function(){
    var height = $(this).attr('data-value');
    if(height <= targetHeight){
      $(this).show();
    }


  });

  $('.btn').removeClass('active');
  $(this).addClass('active');
    });

You could consider updating the HTML for the target divs like this instead of parsing the id values:

<div id="div1" class="targetDiv" data-value="1">Lorum Ipsum1</div>
<div id="div2" class="targetDiv" data-value="2">Lorum Ipsum2</div>
<div id="div3" class="targetDiv" data-value="3">Lorum Ipsum3</div>
<div id="div4" class="targetDiv" data-value="4">Lorum Ipsum4</div>

Answer 5

Answer №3

To effectively hide and show elements on click, one method is to utilize an additional class that toggles the visibility of elements. By removing this class on click, only the selected element will be revealed while the others remain hidden. This prevents all items from being hidden when calling $('.hideClass').hide():

.hideClass{ display: hidden; }

$('.showSingle').click(function() {
    $('#div' + $(this).attr('data-target')).removeClass("hideClass");
    $('.hideClass').hide();
    ...
});

Demo

Answer 6

To effectively hide and show elements on click, one method is to utilize an additional class that toggles the visibility of elements. By removing this class on click, only the selected element will be revealed while the others remain hidden. This prevents all items from being hidden when calling $('.hideClass').hide():

.hideClass{ display: hidden; }

$('.showSingle').click(function() {
    $('#div' + $(this).attr('data-target')).removeClass("hideClass");
    $('.hideClass').hide();
    ...
});

Demo

Numerous links were chosen and multiple div elements were displayed on the screen

Answer №1

Answer №2

Answer №3

Similar questions

Tips for reducing code length in jQuery

What is the best way to make the current year the default selection in my Select control within Reactive Forms?

Show a webpage depending on specific JavaScript criteria

What could be the reason behind the failure of this :after element?

What is the best way to set a specific maximum size for the dropdown selector in Material UI's TextField component?

When the page is refreshed, reorienting axes in three.js encounters difficulties

Retrieve CSS height using Jquery, based on the declared value rather than the computed value

Set up a mouseover function for a <datalist> tag

Transfer information using the Ajax jQuery technique

Establishing the REM value for all CSS properties

Is it possible to utilize X-Y coordinates as repositories for values beyond just X-Y coordinates themselves?

Utilize Foundation Framework to format JSON output with custom styles for rows, columns, and

What is the best method to obtain the following id for an image?

What is preventing me from accessing the sub-elements of an AngularJS controller?

Stop unwanted clicking on inactive buttons in Angular

No instances are returned by Processing.instances

Listen for the modified value in a directive with AngularJS

Choosing a particular svg path in d3.js using JSON attribute

Enhancing Symfony's performance through optimized Ajax response time

Avoiding clashes between CSS styles in web applications