Toggle the visibility of items by clicking on them

Question

Toggle the visibility of items by clicking on them

I am looking to toggle the visibility of elements on a timeline based on the selected year.

For example, if a user clicks on the year 2015, all child elements should be hidden. If the user clicks on the same year again, the elements should then be shown.

I have customized the HTML and CSS for my design, with the original script available at

http://codyhouse.co/gem/vertical-timeline/

I've created a demo on JSFiddle here: http://jsfiddle.net/6nvumkxc/2/

However, I'm encountering an issue where clicking on the year only hides the first element instead of all the cd-timeline-block within that specific year block.

javascript jquery html css

Answer 1

Answer №1

The reason for this behavior is that using .next() only targets the first next sibling in the current context, not all of them. To target all siblings, you can modify the click handler like so:

$('.cd-year').click(function(){
  $(this).parent().find('.cd-timeline-block').slideToggle();
});

Alternatively, you can use:

$('.cd-year').click(function(){
   $(this).nextAll().slideToggle();
});

or

$('.cd-year').click(function(){
    $(this).siblings().slideToggle();
});

See Working Demo

Update: To keep only the first year option open:

$('.cd-year').click(function(){
   $(this).nextAll().slideToggle();
}).not(':first').click();

Demo with first option open

Answer 2

The reason for this behavior is that using .next() only targets the first next sibling in the current context, not all of them. To target all siblings, you can modify the click handler like so:

$('.cd-year').click(function(){
  $(this).parent().find('.cd-timeline-block').slideToggle();
});

Alternatively, you can use:

$('.cd-year').click(function(){
   $(this).nextAll().slideToggle();
});

or

$('.cd-year').click(function(){
    $(this).siblings().slideToggle();
});

See Working Demo

Update: To keep only the first year option open:

$('.cd-year').click(function(){
   $(this).nextAll().slideToggle();
}).not(':first').click();

Demo with first option open

Answer 3

Answer №2

Make sure to implement the following code snippet:

$('.cd-year').click(function(){
    $(this).nextAll(".cd-timeline-block").slideToggle();
});

It is important to note that .next() will only retrieve the next element, whereas you need to utilize .nextAll() to retrieve all elements.

Check out this Fiddle for reference

Answer 4

Make sure to implement the following code snippet:

$('.cd-year').click(function(){
    $(this).nextAll(".cd-timeline-block").slideToggle();
});

It is important to note that .next() will only retrieve the next element, whereas you need to utilize .nextAll() to retrieve all elements.

Check out this Fiddle for reference

Toggle the visibility of items by clicking on them

Answer №1

Answer №2

Similar questions

The <HTML> element is just a bit too big for the screen

What is the best way to change the CSS style of a class using jQuery?

The challenge of applying flex property in React Native JSX

Getting a 406 (Not acceptable) error when trying to perform an AJAX action in Rails 4

Angular Material has support for displaying nested optgroups within select components

The Wordpress sidebar is positioned at the bottom of the page's main content

Struggling to center a fixed width div horizontally in Internet Explorer

Drawbacks of adjusting design according to screen width via javascript detection

Using Javascript Regular Expressions to validate that the first number in an amount is non-zero

Obtain array buffer from NodeJS to capture frames from a video file

The close button within the modal is malfunctioning even with the implementation of the on() function

What is the process for embedding JQuery within the <body> tags in Joomla 3.1?

I'm seeking guidance on handling complex relationships with Mongoose. Please provide a specific challenge example for a quick solution. Thank you

The tooltip feature for icon buttons within Material UI list items is not functioning properly as anticipated

Putting off the execution of jQuery scripts

What is the best way to bring HTML files into the dist directory?

Tips for consolidating an array of numbers with close values

The Angular currency filter is displaying a strange blank space despite the correct syntax being used. Is there anyone who can assist me with this issue?

Merging values of different keys in a .json file

Steps for executing Mocha tests in a specified sequence