Ways to toggle the expansion and collapse of multiple divs efficiently with jQuery without duplicating code

Question

Ways to toggle the expansion and collapse of multiple divs efficiently with jQuery without duplicating code

I am trying to create a script that will expand and collapse a div containing a paragraph when the header text above it is clicked.

<div class="container">
<h3><span class="toggler">Click here to toggle text</span></h3>
<div class="wrapper">
<p>Random content</p>
</div>
</div>

 <div class="container">
<h3><span class="toggler2">Click here to toggle text</span></h3>
<div class="wrapper2">
<p>Random text</p>
</div>
</div>

I know I can use a function that toggles between display: block and display: none.

If I have multiple divs with different classes, repeating the same function for each one seems inefficient. There must be a more elegant solution.

$(document).ready(function() {
$(".toggler").on("click", function() {
    $(".wrapper").toggleClass("active");
   });
});

javascript jquery html css

Answer 1

Answer №1

By utilizing jquery and bootstrap, you can achieve your desired functionality without having to write a single line of code.

Solution 1:

To implement this solution, add the following references:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Update your HTML accordingly:

<div class="container">
    <h3><span class="toggler" data-toggle="collapse" data-target="#col1">Text that toggles</span></h3>
    <div class="wrapper" id="col1">
        <p>Random text</p>
    </div>
</div>

<div class="container">
    <h3><span class="toggler2" data-toggle="collapse" data-target="#col2">Text that toggles</span></h3>
    <div class="wrapper2" id="col2">
        <p>Random text</p>
    </div>
</div>

Solution 2:

Alternatively, you can use this simple line of code:

$(document).ready(function() {
 $("h3").on("click", function() {
    $(this).next().toggleClass("active");
 });
});

This code snippet selects headers using the header Tag and adds toggleClass to the next adjacent element, which is a "DIV". As a result, clicking on the header will toggle the class of the subsequent DIV element.

Answer 2

By utilizing jquery and bootstrap, you can achieve your desired functionality without having to write a single line of code.

Solution 1:

To implement this solution, add the following references:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Update your HTML accordingly:

<div class="container">
    <h3><span class="toggler" data-toggle="collapse" data-target="#col1">Text that toggles</span></h3>
    <div class="wrapper" id="col1">
        <p>Random text</p>
    </div>
</div>

<div class="container">
    <h3><span class="toggler2" data-toggle="collapse" data-target="#col2">Text that toggles</span></h3>
    <div class="wrapper2" id="col2">
        <p>Random text</p>
    </div>
</div>

Solution 2:

Alternatively, you can use this simple line of code:

$(document).ready(function() {
 $("h3").on("click", function() {
    $(this).next().toggleClass("active");
 });
});

This code snippet selects headers using the header Tag and adds toggleClass to the next adjacent element, which is a "DIV". As a result, clicking on the header will toggle the class of the subsequent DIV element.

Answer 3

Answer №2

Instead of repeating the code, assign both elements a single class like "toggle-enabled". Then, use this class as a selector for both elements to run the same function when clicked.

If you only want to toggle the currently selected element, use the "this" keyword to reference the current element and hide or show it accordingly without repeating the code.

See below for an example of how your code should work:

$(document).ready(function() {
 $(".toggle-enabled").on("click", function() {
   var nextdiv = $(this).parent().siblings("div");
   nextdiv.is(":visible")?nextdiv.hide():nextdiv.show();
 });
});

.togglethis{color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h3><span class="toggler toggle-enabled">Text A that toggles</span></h3>
<div class="wrapper togglethis">
<p>Random text</p>
</div>
</div>

 <div class="container">
<h3><span class="toggler2 toggle-enabled">Text B that toggles</span></h3>
<div class="wrapper2 togglethis">
<p>I have left your toggler2 class in there and you can add more classes to separate it</p>
</div>
</div>

Answer 4

Instead of repeating the code, assign both elements a single class like "toggle-enabled". Then, use this class as a selector for both elements to run the same function when clicked.

If you only want to toggle the currently selected element, use the "this" keyword to reference the current element and hide or show it accordingly without repeating the code.

See below for an example of how your code should work:

$(document).ready(function() {
 $(".toggle-enabled").on("click", function() {
   var nextdiv = $(this).parent().siblings("div");
   nextdiv.is(":visible")?nextdiv.hide():nextdiv.show();
 });
});

.togglethis{color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h3><span class="toggler toggle-enabled">Text A that toggles</span></h3>
<div class="wrapper togglethis">
<p>Random text</p>
</div>
</div>

 <div class="container">
<h3><span class="toggler2 toggle-enabled">Text B that toggles</span></h3>
<div class="wrapper2 togglethis">
<p>I have left your toggler2 class in there and you can add more classes to separate it</p>
</div>
</div>

Answer 5

Answer №3

To make this code function properly in your HTML document, follow these steps:

$(document).ready(function () { 
    $('[class^="toggler"]').on('click', function () { 
        $(this).closest('.container').children('[class^="wrapper"]').toggle();
     });
});

This script targets any element in your HTML with a class name that begins with toggle. It then adds an event listener for clicks on those elements. When clicked, the script finds the closest ancestor element with the class name of container. From there, it selects children elements with class names starting with wrapper and toggles their visibility.

You can name your toggle elements with class names like toggleN (where N is any valid character) or simply toggle. Similarly, you can name your wrapper elements with class names like wrapperN or just wrapper.

Answer 6

To make this code function properly in your HTML document, follow these steps:

$(document).ready(function () { 
    $('[class^="toggler"]').on('click', function () { 
        $(this).closest('.container').children('[class^="wrapper"]').toggle();
     });
});

This script targets any element in your HTML with a class name that begins with toggle. It then adds an event listener for clicks on those elements. When clicked, the script finds the closest ancestor element with the class name of container. From there, it selects children elements with class names starting with wrapper and toggles their visibility.

You can name your toggle elements with class names like toggleN (where N is any valid character) or simply toggle. Similarly, you can name your wrapper elements with class names like wrapperN or just wrapper.

Ways to toggle the expansion and collapse of multiple divs efficiently with jQuery without duplicating code

Answer №1

Answer №2

Answer №3

Similar questions

We are experiencing difficulties rendering flash messages in Expressjs with Handlebars(hbs) and express-messages using flash-connect

Tips for choosing an option from a react dropdown using Cypress

Adjust the sequence of the series in dimple's multi-series chart using interactive features

I possess 9 captivating visuals that gracefully unveil their larger counterparts upon being clicked. Curiously, this enchanting feature seems to encounter a perplexing issue within the realm of web browsing

Leveraging the power of Google Charts along with MySQL or

Tips for retrieving the checked status of a Material UI <Checkbox/> component and changing it to false upon clicking a different icon (such as a delete icon)

Shut down two modal windows and then open one anew

Creating a dynamic effect by applying a scale animation to a circle, overlaying centered text on top, and utilizing

Which core modules of Node Js serve as the foundation for Express Js?

What is the best way to send form data using AJAX with Braintree Transparent Redirect?

Assessing the string to define the structure of the object

Refreshing Django HTML table dynamically upon database updates

react elements are consistently positioned at the bottom of the webpage

Typescript declaration specifies the return type of function properties

Tips for resolving this unhandled error in React TypeScript

Clicking on a React Material UI ListItem

Superceding Meta Character Encoding Statements

Creating a way for a Node and React application to share classes

Is the .html page cached and accessible offline if not included in the service-worker.js file?

Tips for displaying an array in a tabular layout using angularjs