Hiding certain DIVs (not nested unfortunately)

Hiding certain DIVs (not nested unfortunately)

I am working with legacy code that is generated automatically and must
comply to the 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 be more divs here, IDs can vary as well) ...
<div id="TITLE2"></div>
What I want to do now is the following:
Make TITLE1 clickable
Once clicked hide all underlying DIVs (not nested and not possible to nest)
Another click on TITLE1 shows the previously hidden DIVs again
Only hide those DIVs that follow a TITLE up to a next TITLE (excluding)
The Solution may use jQuery or such frameworks.