Jquery solution for toggling multiple Divs individually

Question

Jquery solution for toggling multiple Divs individually

I'm currently working on a small application that has both a sidebar menu and a header menu. My goal is to have all items in these menus toggle the visibility of content in one main window or page. When a button is clicked, I want it to show the corresponding section and hide all other sections.

<a id="linktodiv1">Show Window 1, hide other windows</a>
<a id="linktodiv2">Show Window 2, hide other windows</a>
<a id="linktodiv3">Show Window 3, hide other windows</a>
<div id="linktodiv4">Show Window 4, hide other windows</div>

<div id="window1">content</div>
<div id="window2">content</div>
<div id="window3">content</div>
<div id="window4">content</div>

Does anyone know the best or cleanest way to implement this functionality using jQuery? Any help would be greatly appreciated. Thanks!

javascript jquery css user-interface show-hide

Answer 1

Answer №1

Using indexing to display content in order on a page

var $links = $('[id^=linktodiv]'),// storing elements as variables
    $content = $('[id^=window]');

$links.click(function(){
    // hiding all content and showing corresponding index content window
    $content.hide().eq( $links.index(this) ).show();        
});

Assigning common components with a shared class can be very helpful

CHECK OUT DEMO

Answer 2

Using indexing to display content in order on a page

var $links = $('[id^=linktodiv]'),// storing elements as variables
    $content = $('[id^=window]');

$links.click(function(){
    // hiding all content and showing corresponding index content window
    $content.hide().eq( $links.index(this) ).show();        
});

Assigning common components with a shared class can be very helpful

CHECK OUT DEMO

Answer 3

Answer №2

Make sure to assign specific classes to your links and divs. For example, use .showHide for links and .contDiv for divs. Assuming they are in the same order:

$('.showHide').on('click', function() {
    $('.contDiv').hide('slow');
    $('.contDiv').eq($(this).index()).show('slow');
});

Check out the jsfiddle DEMO here.

Answer 4

Make sure to assign specific classes to your links and divs. For example, use .showHide for links and .contDiv for divs. Assuming they are in the same order:

$('.showHide').on('click', function() {
    $('.contDiv').hide('slow');
    $('.contDiv').eq($(this).index()).show('slow');
});

Check out the jsfiddle DEMO here.

Answer 5

Answer №3

If you're in need of a solution that provides a sleek and organized interface, consider implementing the jquery accordion method from the jquery UI library. You can find more information about it here: https://jqueryui.com/accordion/, which seems to align perfectly with your requirements.

For a practical example, check out this demo on JSFiddle: http://jsfiddle.net/d6mSA/616/

The code snippet you'll need is:

<div id="accordion"> 
    <h3><a href="#">Show Window 1</a></h3>
    <div>
        <p>Section 1 Content</p>
    </div>
    <h3><a href="#">Show Window 2</a></h3>
    <div>
        <p>Section 2 Content</p>
    </div>
    <h3><a href="#">Show Window 3</a></h3>
    <div>
        <p>Section 3 Content</p>
    </div>
    <h3><a href="#">Show Window 4</a></h3>
    <div>
        <p>Section 4 Content</p>
    </div>
</div>

JQUERY

$(function () {
    $("#accordion").accordion({
        autoHeight: true
    });
    $("#accordion").accordion({
        collapsible: true
    });
});

Answer 6

If you're in need of a solution that provides a sleek and organized interface, consider implementing the jquery accordion method from the jquery UI library. You can find more information about it here: https://jqueryui.com/accordion/, which seems to align perfectly with your requirements.

For a practical example, check out this demo on JSFiddle: http://jsfiddle.net/d6mSA/616/

The code snippet you'll need is:

<div id="accordion"> 
    <h3><a href="#">Show Window 1</a></h3>
    <div>
        <p>Section 1 Content</p>
    </div>
    <h3><a href="#">Show Window 2</a></h3>
    <div>
        <p>Section 2 Content</p>
    </div>
    <h3><a href="#">Show Window 3</a></h3>
    <div>
        <p>Section 3 Content</p>
    </div>
    <h3><a href="#">Show Window 4</a></h3>
    <div>
        <p>Section 4 Content</p>
    </div>
</div>

JQUERY

$(function () {
    $("#accordion").accordion({
        autoHeight: true
    });
    $("#accordion").accordion({
        collapsible: true
    });
});

Answer 7

Answer №4

If you're in search of tabs, there are various options available for you to consider.

For starters, if you have bootstrap loaded on your page, you can refer to this link:

http://getbootstrap.com/javascript/#tabs

Alternatively, if you already have jQuery UI installed or are open to loading it, you may find this link useful:

https://jqueryui.com/tabs/

In case you don't have either but are willing to incorporate a plugin, you can explore options such as:

Answer 8

If you're in search of tabs, there are various options available for you to consider.

For starters, if you have bootstrap loaded on your page, you can refer to this link:

http://getbootstrap.com/javascript/#tabs

Alternatively, if you already have jQuery UI installed or are open to loading it, you may find this link useful:

https://jqueryui.com/tabs/

In case you don't have either but are willing to incorporate a plugin, you can explore options such as:

Jquery solution for toggling multiple Divs individually

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Using Polymer to automatically update the DOM when a JSON file is modified

Passing multiple functions to child components in ReactJS as a single prop

jQuery AJAX issues on Safari and iOS gadgets

Using Axios and Typescript to filter an array object and return only the specified properties

Integrate Geometric Information into PostGIS

What size should I use for creating a responsive website?

How can I change :hover to a clickable element instead?

Is there a way to determine the duration that a click was held down for?

Refresh the array using Composition API

Elevate your website's design with Vue and create eye-catching CSS

How can Vue JS 3 components exchange data between each other?

JQuery not being recognized by MVC4 view

Problems during the installation of Webpack

`Modified regions determined by cursor location`

Guide on plotting latitude and longitude coordinates on Google Maps with Vue.js through JSON data fetched via AJAX

Is there a way to instantly show the contents of a newly opened tab in BootstrapVue?

Clicking on Only One Card in Material UI React

Leveraging Ajax with Google Analytics

Deleting the main node in a JSON file containing multiple values

Incorporating lodash into Angularjs for enhanced functionality