Search code examples
phpstorm

Fold current level blocks (siblings elements) in PhpStorm


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>

Solution

  • 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.