How to expand a collapsible item from link within another collapsible item [js]?

16,986

I would just trigger click event on first .collapsible-header item, with slightly changed html code for the anchor:

$('[data-click]').on('click', function (e) {
    $( $(this).data('click') ).trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css" rel="stylesheet"/>

<div>
    <ul class="collapsible" data-collapsible="accordion">
        <li>
            <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>First</div>
            <div class="collapsible-body">
                <p>Hello StackOverflow! SO's da' bomb diggidy!</p>
            </div>
        </li>
        <li>
            <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Second</div>
            <div class="collapsible-body">
                <p>Why is the person who invests your money called a broker?</p>
            </div>
        </li>
        <li>
            <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Third</div>
            <div class="collapsible-body">
                <p>I'd like to <a href="#" data-click=".collapsible .collapsible-header:first">open the First collapsible element</a> in this list.</p>
            </div>
        </li>
    </ul>
</div>

Same code is also on Fiddle.

If you wish to target n-th element, than you can use jQuery :eq() selector (zero based). For example, to target 3rd item you would use '.collapsible-header:eq(2)' selector.


If you care about the SEO (and you should), than your links should have correct href. In this case add unique IDs to .collapsible_header elements and use slightly different script to exploit it:

$('[data-click]').on('click', function (e) {
    $( $(this).attr('href') ).trigger('click');
});

where the target item is:

<div id="about_stackoverflow" class="collapsible-header">

and the valid local link is:

<a href="#about_stackoverflow" title="Click to open first item" data-click="true">open the First collapsible element</a>

You can see it working on this Fiddle. (The last anchor may be anywhere on the same page)

Share:
16,986

Related videos on Youtube

zelusp
Author by

zelusp

I automate stuff

Updated on June 04, 2022

Comments

  • zelusp
    zelusp over 1 year

    I'm making a list of collapsible items that can make calls to itself to scroll to and expand other items on the fly. Shooting for this...

    Before selecting the hyperlink. enter image description here

    After selecting. enter image description here

    How can I get the First collapsed item to expand when the link to it in the Third item's paragraph is selected?

    What I got: If the example above had more collapsed items, then the code below would scroll the webpage to the desired collapsible item (half the solution).

    <!DOCTYPE html>
    <html>
        <head>
          <!--Import materialize.css-->
          <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
          <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        </head>
        <body>
        <div>
            <ul class="collapsible" data-collapsible="accordion">
                <li>
                  <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i><a name="987"/>First</a></div>
                  <div class="collapsible-body"><p>Hello StackOverflow! SO's da' bomb diggidy!</p></div>
                </li>
                <li>
                  <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Second</div>
                  <div class="collapsible-body"><p>Why is the person who invests your money called a broker?</p></div>
                </li>
                <li>
                  <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Third</div>
                  <div class="collapsible-body"><p>I'd like to <a href="#987">open the First collapsible element</a> in this list.</p></div>
                </li>
            </ul>
        </div>
          <!--Import jQuery before materialize.js-->
          <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
          <script type="text/javascript" src="js/materialize.min.js"></script>
        </body>
      </html>
    
  • zelusp
    zelusp over 8 years
    Works like a charm. In all seriousness, @skobaljic - you're Awesome. Thanks!
  • zelusp
    zelusp over 8 years
    Other than being able to dynamically open the last note by using the qualifier last, I can't modify which note I'm opening per your anchor implementation <a href="#" data-click=".collapsible .collapsible-header:first">. How can I use this anchor to open any collapsed item and NOT just the first or last one?
  • skobaljic
    skobaljic over 8 years
    You can add IDs to your .collapsible-headers and than use '#your_id' as a selector. If you wish to target n-th element, than you can use jQuery :eq() selector (zero based). For example, to target 3rd item you would use .collapsible-header:eq(2).

Related