Question

37

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

rated 0 times [ 42] [ 5] / answers: 1 / hits: 17897 / 9 Years ago, tue, march 24, 2015, 12:00:00

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

After selecting.
enter

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dustin

Add To Favorites

Follow

Total Points: 599

Total Questions: 105

Total Answers: 106

Location: Belarus

Member since Tue, Mar 14, 2023

1 Year ago

dustin questions

1 'Routes' is not defined react/jsx-no-undef

Wed, Dec 1, 21, 00:00, 3 Years ago

1 event in Javascript is deprecated and I cannot use preventDefault()

Sun, Apr 18, 21, 00:00, 3 Years ago

1 playwright - issues with login form, inputs and submit click

Wed, Apr 14, 21, 00:00, 3 Years ago

1 How to mock fs.readFileSync with jest

Sun, Sep 20, 20, 00:00, 4 Years ago

1 How to download pdf from puppeteer using Nest js as Server Side and React in Client Side?

Wed, Jul 8, 20, 00:00, 4 Years ago

View All

answered 9 Years ago ishmaelw · Accepted Answer

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)