Dear StackOverflow homies,
I'm making a list of collapsible items that can make calls to itself to expand items on the fly. There are many references for making collapsible lists but not as many for making these dynamically collapsible according to anchor selection. This Expandable List tutorial and this popular SO post How can you programmatically tell an HTML SELECT to drop down touch the subject but leave unclear how to implement the select part
A modification of either of those post's material would do the trick but I'm not sure how to proceed with MaterializeCSS (Google's baby) and causing conflicts overlaying additional js atop Materialize's js (if any?). Shooting for this...
Shweet illustration: Before selecting the hyperlink. 
After selecting. 
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="http://ift.tt/1hhKFa1"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
The files materialize.min.css and materialize.min.js are found at Materialize's Startup Page.
Aucun commentaire:
Enregistrer un commentaire