magento 2 customer account navigation make collapsible for tablet

Question

I am trying to make customer account navigation collapsible for tablet. Could anyone let me know which js or css file I need to edit for this?

Please see the below image to what I want:

Please help me out this.

Answer 1

You can use Magento Collapsible Widget

Firstly you need to copy this file to your theme

vendor/magento/module-customer/view/frontend/templates/account/navigation.phtml

to

app/design/frontend/Vendor/themename/Magento_Customer/templates/account/navigation.phtml

Then you need to change structure of following

<div class="content">
    <nav class="account-nav">
        <ul class="nav items">
            <?php echo $block->getChildHtml();?>
        </ul>
    </nav>
</div>

to following

<div id="account-links-collapsible">
    <div data-role="collapsible">
        <div data-role="trigger">
            <span>Account Links</span>
        </div>
    </div>
    <div class="content" data-role="content">
        <nav class="account-nav">
            <ul class="nav items">
                <?php echo $block->getChildHtml();?>
            </ul>
         </nav>
    </div>
</div>

Then you can add following script below to page content or in your custom js

<script>
    require([
        'jquery',
        'collapsible'], function ($) {
        $("#account-links-collapsible").collapsible();
    });
</script>

And to add your condition you can use active and deactivate methods like following

To Expand the content if windows width > 768

$("#account-links-collapsible").collapsible("activate");

To Collapse the content if windows width <= 768

$( "#account-links-collapsible" ).collapsible("deactivate");

For more information on methods please go through this link: http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/widgets/widget_collapsible.html

EDIT:

Please update following code.

<div id="account-links-collapsible">
    <div data-role="collapsible">
        <div data-role="trigger">
            <span>Account Links</span>
        </div>
    </div>
    <div class="content" data-role="content">
        <nav class="account-nav">
            <ul class="nav items">
                <?php echo $block->getChildHtml();?>
            </ul>
         </nav>
    </div>
</div>

to

<div id="account-links-collapsible" data-mage-init='{"accordion":{"openedState": "active", "collapsible": true, "active": false, "multipleCollapsible": true}}'>
    <div data-role="collapsible">
        <div data-role="trigger">
            <span>Account Links</span>
        </div>
    </div>
    <div class="content" data-role="content">
        <nav class="account-nav">
            <ul class="nav items">
                <?php echo $block->getChildHtml();?>
            </ul>
         </nav>
    </div>
</div>




<script>
    require([
        'jquery',
        'accordion'], function ($) {
        // Based on your requirement 
        $("#account-links-collapsible").collapsible("activate");
        $("#account-links-collapsible").collapsible("deactivate");
    });
</script>