javascript - Hiding certain DIVs (not nested unfortunately) -


i working legacy code generated automatically , must comply following structure:

<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 more divs here, ids can vary well) ... <div id="title2"></div> 

what want following:

  • make title1 clickable
  • once clicked hide underlying divs (not nested , not possible nest)
  • another click on title1 shows hidden divs again
  • only hide divs follow title next title (excluding)

the solution may use jquery or such frameworks.

try

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

demo: fiddle

the underlying logic simple - make divs id starting title clickable adding click handler - attribute starts with selector used. find divs between clicked element , next element id starting title - done using .nextuntil() traversal method. .toggle() used hide/show element


Comments

Popular posts from this blog

c++ - Linked List error when inserting for the last time -

java - activate/deactivate sonar maven plugin by profile? -

java - What is the difference between String. and String.this. ? -