Concealing specific DIV elements (unfortunately not nested)

Question

Concealing specific DIV elements (unfortunately not nested)

Currently, I am dealing with pre-existing code that is automatically generated and needs to adhere to a specific format:

<div id="TITLE1"></div>
<div id="div-1"></div>
<div id="div-2"></div>
<div id="div-3"></div>
<div id="div-4"></div>
.... (there can be more divs here, IDs can vary as well) ...
<div id="TITLE2"></div>

My current objective involves the following tasks:

Enable TITLE1 to be clickable
Upon clicking, hide all subsequent DIVs (not nested and unable to nest)
If TITLE1 is clicked again, display the previously hidden DIVs
Only conceal those DIVs that directly follow a TITLE until the next TITLE (exclusive)

The preferred resolution allows for the utilization of jQuery or similar frameworks.

javascript jquery css html

Answer 1

Answer №1

Give it a shot

$('div[id^=TITLE]').click(function(){
    $(this).nextUntil('div[id^=TITLE]').toggle();
})

See it in action: Fiddle

The concept behind this is straightforward - Enable clicking on divs with ids that start with TITLE by attaching a click event handler - achieved through the use of the attribute starts with selector. Then identify all divs between the clicked element and the subsequent element with an id beginning with TITLE - accomplished using the .nextUntil() traversal method. Finally, employ .toggle() to display or conceal the element

Answer 2

Give it a shot

$('div[id^=TITLE]').click(function(){
    $(this).nextUntil('div[id^=TITLE]').toggle();
})

See it in action: Fiddle

The concept behind this is straightforward - Enable clicking on divs with ids that start with TITLE by attaching a click event handler - achieved through the use of the attribute starts with selector. Then identify all divs between the clicked element and the subsequent element with an id beginning with TITLE - accomplished using the .nextUntil() traversal method. Finally, employ .toggle() to display or conceal the element

Answer 3

Answer №2

Here's a potential solution:

$(document).ready(function() {
    $("body").on("click", 'div[id^="TITLE"]', function() {
        $(this).nextUntil('div[id^="TITLE"]').slideToggle();
    });
});

See it in action: http://jsfiddle.net/cjZzG/

This script allows for toggling the visibility of elements when a div with an ID starting with "TITLE" is clicked, using the .nextUntil() method to select and manipulate those elements.

Answer 4

Here's a potential solution:

$(document).ready(function() {
    $("body").on("click", 'div[id^="TITLE"]', function() {
        $(this).nextUntil('div[id^="TITLE"]').slideToggle();
    });
});

See it in action: http://jsfiddle.net/cjZzG/

This script allows for toggling the visibility of elements when a div with an ID starting with "TITLE" is clicked, using the .nextUntil() method to select and manipulate those elements.

Answer 5

Answer №3

To make things simpler, consider wrapping the elements title1 and div-# in a single div. This way, you can easily detect a click on title1, select the parent element, and hide all children except the title div.

Here's an example:

<div>
    <div class="title">Toggle divs</div>
    <div id="div1">Div1</div>
    <div id="div2">Div2</div>
    <div id="div3">Div3</div>
</div>
<div>
    <div class="title">Toggle divs</div>
    <div id="div1">Div4</div>
    <div id="div2">Div5</div>
    <div id="div3">Div6</div>
</div>

$(document).ready(function() {
    $('.title').click(function() {
       $(this).parent().children().not('.title').toggle(1000); 
    });
});

This solution organizes the elements logically, making it easier for SEO and code readability.

http://jsfiddle.net/WBH7C/

If editing the HTML is not possible, you can use a solution like this:

$('div[id^=TITLE]').click(function(){
    $(this).nextUntil('div[id^=TITLE]').find('div[id^=div-]').toggle();
})

Answer 6

To make things simpler, consider wrapping the elements title1 and div-# in a single div. This way, you can easily detect a click on title1, select the parent element, and hide all children except the title div.

Here's an example:

<div>
    <div class="title">Toggle divs</div>
    <div id="div1">Div1</div>
    <div id="div2">Div2</div>
    <div id="div3">Div3</div>
</div>
<div>
    <div class="title">Toggle divs</div>
    <div id="div1">Div4</div>
    <div id="div2">Div5</div>
    <div id="div3">Div6</div>
</div>

$(document).ready(function() {
    $('.title').click(function() {
       $(this).parent().children().not('.title').toggle(1000); 
    });
});

This solution organizes the elements logically, making it easier for SEO and code readability.

http://jsfiddle.net/WBH7C/

If editing the HTML is not possible, you can use a solution like this:

$('div[id^=TITLE]').click(function(){
    $(this).nextUntil('div[id^=TITLE]').find('div[id^=div-]').toggle();
})

Concealing specific DIV elements (unfortunately not nested)

Answer №1

Answer №2

Answer №3

Similar questions

Tips for retaining a chosen selection in a dropdown box using AngularJS

Getting command line argument parameters in React can be achieved by utilizing the `process.argv`

Is there a way to ensure that my function does not return undefined and instead returns a specific value?

"Error message pops up indicating the dispatcher is missing while using npm link with a local project

ID is not receiving the CSS styles

Tips for utilizing the json_encode function with an array

Attempting to figure out how to make Bootstrap pagination function properly

`Async/await: Implementing a timeout after a fadeout once the fadein operation is

Expanding Beyond Boundaries: Utilizing CSS to Overflow From a Div and Fill the Entire Screen

Enhance efficiency of repetitive tasks involving accessing the Mongo database

obtain the string representation of the decimal HTML entity value

"Using version 4.2.6 of NodeJS, create a constructor that takes a literal object as a

Two select boxes trigger multiple sorting operations

What could be causing the unexpected behavior of angular.isNumber()?

I'm experiencing an issue where the links in my dropdown button are not showing when I hover over it. What could

Animate.css does not function properly when loaded locally

Exploring the DOM, store all anchor elements inside a <ul> tag with a specific ID in an array

Automatically install the development version of NW.js when running 'npm i'

Issue: Anticipated the primary reducer to be a function, but was presented with: 'undefined' in Vanilla JS with Redux