Assume you are in a ul
list and you want to fold all li
elements in that ul
, i.e. how could fold all same level elements using PhpStorm?
<ul>
<li class="webdesign">
<a href="http://www.youtube.com/embed/c9MnSeYYtYY?autoplay=1" rel="portfolio" class="folio iframe">
<img src="portfolio/3-thumb.jpg" alt="" >
<h2 class="title">Snow time</h2>
<span class="categorie">Webdesign</span>
</a>
</li>
<li class="photoghraphy">
<a href="http://www.google.com" rel="portfolio" target="_new">
<img src="portfolio/2-thumb.jpg" alt="" >
<h2 class="title">Help us</h2>
<span class="categorie">Photography</span>
</a>
</li>
<li class="animation print">
<a href="portfolio/4.jpg" rel="portfolio" class="folio">
<img src="portfolio/4-thumb.jpg" alt="" >
<h2 class="title">Sunshine</h2>
<span class="categorie">Print / Animation</span>
</a>
</li>
</ul>
Use Alt + Click on fold sign [-]
(on the edge of the editor area) to fold <ul>
element ... and then unfold it in a normal way (just Click).
From https://www.jetbrains.com/help/phpstorm/2016.3/code-folding.html#folding_means
If you hold the
Alt
key and click[+]
/[-]
icons the region is collapsed or expanded recursively, i.e. along with all its subordinate regions.
So the idea behind is: collapse element and all children and then expand just top level element.
P.S. Instead of Alt + Click (which involves mouse usage) you can use just keyboard shortcut for Collapse Recursively
action.
Nuance with keyboard only shortcut is: you have to place caret on that top line first .. which also may involve few key presses.