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

What is the best way to calculate the number of squares required to completely fill a browser window in real-time?

Troubleshooting PHP webpage with dysfunctional Python AJAX functionality

Guidelines on declining a pledge in NativeScript with Angular 2

Tips for defining the width of columns that adapt to different screen sizes in Bootstrap version 4

An error is thrown when using AngularJS .length property

Puppeteer App Error: An error has been detected on the client side

"When implementing an Ajax autorefresh feature, ensure you pass the necessary variables consistently to update the content. Don't overlook

Quasar unable to detect vuex store

What is the best way to transfer information from a directive to a sibling element within the DOM?

Node.js encountered a TypeError [ERR_INVALID_ARG_TYPE] stating that the "chunk" argument should either be a string or a Buffer instance

Master Angular Autocompletion

Create a dynamic editing experience using PHP and AJAX, allowing users to make

What is the method for configuring my bot to forward all logs to a specific channel?

How to display an image in a pop-up with a title

The initial ajax request may sometimes return as 'undefined' during its first call

Exploring the functionality of JavaScript's concat method

Is it possible to increment an integer value in jQuery after obtaining the sum result?

Managing data binding for checkboxes within a constantly changing set of options

Combining the inline JavaScript linting tool ESLint with the popular Airbnb configuration and Facebook

Learn how to use the Firebase Adapter for Next Auth to easily sign in using your email and password