Toggle Visibility of Multiple Divs with Onclick in jQuery

Question

Toggle Visibility of Multiple Divs with Onclick in jQuery

I am in need of creating a navigation system that can display or hide multiple divs depending on user interactions.

My requirements are as follows: When a user clicks on any of the "options", I want a class called "selected" to be applied to the chosen item in the navigation. This will involve adding the class to the anchor element. The CSS styling for the "selected" class is already defined in the example below.

Click here to see my current progress

Additionally, I am struggling with setting either "option 1" or "option 2" as selected by default when the page loads. This is necessary so that only one div appears initially, based on the correct "option" being "selected".

I am open to any suggestions or recommendations to help me accomplish this task!

jquery html css

Answer 1

Answer №1

To ensure valid HTML, it is recommended to use data attributes instead of just target. I updated it to data-target and implemented the following code:

$('.showSingle').on('click', function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    $('.targetDiv').hide();
    $('#div' + $(this).data('target')).show();
});

FIDDLE

If you are using an older version of jQuery (such as in your fiddle), remember that on() will only work in jQuery 1.7+. In this case, stick with click().

Answer 2

To ensure valid HTML, it is recommended to use data attributes instead of just target. I updated it to data-target and implemented the following code:

$('.showSingle').on('click', function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    $('.targetDiv').hide();
    $('#div' + $(this).data('target')).show();
});

FIDDLE

If you are using an older version of jQuery (such as in your fiddle), remember that on() will only work in jQuery 1.7+. In this case, stick with click().

Answer 3

Answer №2

$('.showSingle').on('click', function () {
   $('.targetDiv').hide();
   $('#div' + $(this).attr('target')).show();
   $('.showSingle').removeClass('selected');
   $(this).addClass('selected');           
});

var active_link = 2; // Update this variable to change the active link
$('a[target='+active_link+']').trigger('click');

Answer 4

$('.showSingle').on('click', function () {
   $('.targetDiv').hide();
   $('#div' + $(this).attr('target')).show();
   $('.showSingle').removeClass('selected');
   $(this).addClass('selected');           
});

var active_link = 2; // Update this variable to change the active link
$('a[target='+active_link+']').trigger('click');

Answer 5

Answer №3

Take a look at this code snippet that removes the "selected" class from all .showSingle anchors and adds it to the clicked anchor. It also addresses the issue of hiding all .targetDivs on page load and only showing the first one.

UPDATE: The script now ensures that the first option is highlighted in red when the page loads as well. Check it out here: http://jsfiddle.net/XwN2L/421/

Answer 6

Take a look at this code snippet that removes the "selected" class from all .showSingle anchors and adds it to the clicked anchor. It also addresses the issue of hiding all .targetDivs on page load and only showing the first one.

UPDATE: The script now ensures that the first option is highlighted in red when the page loads as well. Check it out here: http://jsfiddle.net/XwN2L/421/

Answer 7

Answer №4

UPDATE: Here is an alternative solution without using JQuery:

function toggleDisplay(element) { 
     var item = document.getElementById(element); 
     if (element) { 
          if (item.style.display == 'none') { 
                item.style.display = 'block'; 
          } else { 
                item.style.display = 'none'; 
          } 
     } 
}

This code can be used to show and hide elements in your JavaScript.

<div class="buttons">
    <button class="showSingle" target="1" onClick="toggleDisplay('div1');">Option 1</button>
    <button class="showSingle" target="2" onClick="toggleDisplay('div2');">Option 2</button>
    <button class="showSingle" target="3" onClick="toggleDisplay('div3');">Option 3</button>
    <button class="showSingle" target="4" onClick="toggleDisplay('div4');">Option 4</button>
</div>

<div id="div1" class="targetDiv" style="display:none">Lorum Ipsum 1</div>
<div id="div2" class="targetDiv" style="display:none">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv" style="display:none">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv" style="display:none">Lorum Ipsum 4</div>

This should help you implement the functionality you need :-)

Sorry for overlooking the inclusion of JQuery previously!

Answer 8

UPDATE: Here is an alternative solution without using JQuery:

function toggleDisplay(element) { 
     var item = document.getElementById(element); 
     if (element) { 
          if (item.style.display == 'none') { 
                item.style.display = 'block'; 
          } else { 
                item.style.display = 'none'; 
          } 
     } 
}

This code can be used to show and hide elements in your JavaScript.

<div class="buttons">
    <button class="showSingle" target="1" onClick="toggleDisplay('div1');">Option 1</button>
    <button class="showSingle" target="2" onClick="toggleDisplay('div2');">Option 2</button>
    <button class="showSingle" target="3" onClick="toggleDisplay('div3');">Option 3</button>
    <button class="showSingle" target="4" onClick="toggleDisplay('div4');">Option 4</button>
</div>

<div id="div1" class="targetDiv" style="display:none">Lorum Ipsum 1</div>
<div id="div2" class="targetDiv" style="display:none">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv" style="display:none">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv" style="display:none">Lorum Ipsum 4</div>

This should help you implement the functionality you need :-)

Sorry for overlooking the inclusion of JQuery previously!

Answer 9

Answer №5

If you're experiencing an issue, try incorporating the following code into your click event:

    $(".options .active").removeClass("active");
    $(this).addClass("active");

Alternatively, as suggested by TechGenius (an even more efficient method):

$(this).addClass('active').siblings().removeClass('active');

Answer 10

If you're experiencing an issue, try incorporating the following code into your click event:

    $(".options .active").removeClass("active");
    $(this).addClass("active");

Alternatively, as suggested by TechGenius (an even more efficient method):

$(this).addClass('active').siblings().removeClass('active');

Toggle Visibility of Multiple Divs with Onclick in jQuery

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Creating a React button animation with CSS vibes

Unable to see the tokens on the connect four board when using Javascript and HTML

Updating votes on the client side in WebForms can be achieved by following these steps

Parsing HTML with Retrofit 2.0

Is there a way for me to place my list item onto the following available line?

Safari alters the header color on mobile devices

What is causing the <a> elements not to align in the center of my <li> navigation items?

Broken links detected in the Full Page Navigation menu on a one-page website

The z-index property does not seem to apply to pseudo elements

What causes the footer element to shift outside of the paragraph tag?

Comparison between WAMP and Live server integration with Facebook for connecting applications

I am facing constant connection resets while attempting to upload a file to the Tomcat server

Formatting issue with chords and lyrics

Creating a canvas in Javascript that allows users to drag and drop elements within set boundaries

JSP checkbox functionality

How to Arrange Images in Columns Next to Each Other Using Bootstrap 4

Can JavaScript trigger an alert based on a CSS value?

The absence of image input was evident in the POST request

Using JavaScript to empty input field when switching focus between input fields

Arranging an array using jQuery JSON information