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 hiddendivs
again - only hide
divs
followtitle
nexttitle
(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
Post a Comment