collapse list items after link click |
collapse list items after link click |
dualshock |
Dec 4 2020, 03:00 AM
Post
#1
|
Group: Members Posts: 2 Joined: 4-December 20 Member No.: 27,669 |
how can i create a link with anchor to a collapse button? I tried using href="page.html/#collapsediv" but not working.
I have a list-group items which opens a page in an iframe and at the same, collapses that lists to slide the iframe up. Here's the script: CODE <div class="container-fluid"> <div id="collapsediv" class="collapse in" > <div class="p-2 mb-2 bg-success text-white">Contents</div> <div class="row"> <div class="form-group col-sm-3"><p><h4>Operations Manual</h4></p> <ul class="list-group border-0"> <li class="list-group-item border-0"> <a href="opd/om/OPU - Section 0.2 Table of Contents1.html" class="text-decoration-none" target="targetframe"><i class="fas fa-book-reader"></i><span> Table of Contents</span></a> </li> <li class="list-group-item border-0"> <a href="qmu/rev-sum.html" class="text-decoration-none" target="targetframe"><i class="fas fa-book-reader"></i><span> Revision Summary</span></a> </li> </ul> </div> </div> </div> <div class="row"> <ul> <li class="list-group-item border-0"><a class="btn btn-success" data-toggle="collapse" href="#collapsediv" role="button" aria-expanded="false" aria-controls="collapsediv" class="text-decoration-none"> Collapse </a> <button class="btn btn-dark" type="button">Full</button> <button class="btn btn-secondary hBack" type="button">Back</button> </li></ul></div> <div class="page-content"><hr> <div id="mycontainer"> <iframe src="" height=90% width=100% name="targetframe" allowTransparency="true" scrolling="yes" frameborder="0"></iframe> </div> </div> </div> |
pandy |
Dec 4 2020, 10:37 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,732 Joined: 9-August 06 Member No.: 6 |
It works. But the page is so short it can't scroll.
|
Christian J |
Dec 4 2020, 11:39 AM
Post
#3
|
. Group: WDG Moderators Posts: 9,660 Joined: 10-August 06 Member No.: 7 |
how can i create a link with anchor to a collapse button? I didn't understand that. Do you want to collapse the UL list (as in hiding LI elements)? Or do you want the page to scroll down to the IFRAME element? QUOTE I tried using href="page.html/#collapsediv" Side-note: if page.html is a file (and not a directory), you should probably use page.html#collapsediv without a slash. |
pandy |
Dec 4 2020, 02:17 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,732 Joined: 9-August 06 Member No.: 6 |
Yes, I forgot to ask that. The link you have does work as I said, but the page can't scroll since it's already scrolled to the top. If you want something more to happen you need more than a simple link.
|
dualshock |
Dec 6 2020, 07:12 PM
Post
#5
|
Group: Members Posts: 2 Joined: 4-December 20 Member No.: 27,669 |
how can i create a link with anchor to a collapse button? I didn't understand that. Do you want to collapse the UL list (as in hiding LI elements)? Or do you want the page to scroll down to the IFRAME element? QUOTE I tried using href="page.html/#collapsediv" Side-note: if page.html is a file (and not a directory), you should probably use page.html#collapsediv without a slash. yes, i want to collapse the entire UL list then scroll down to the iframe element while at the same time, changing the content in the iframe based from the link selected. I'll take note on your second reply |
Christian J |
Dec 7 2020, 11:49 AM
Post
#6
|
. Group: WDG Moderators Posts: 9,660 Joined: 10-August 06 Member No.: 7 |
I had to use javascript for this. I also added a toggle button, so the user can get back the menu after it's removed.
CSS: CODE ul.show {display: block;} ul.hide {display: none;} Javascript and HTML: CODE <script type="text/javascript"> window.addEventListener('DOMContentLoaded', function() { var ul=document.getElementById('ul'); var a=ul.getElementsByTagName('a'); for(var i=0; i<a.length; i++) { a[i].onclick=function() { ul.className='hide'; } } var button=document.getElementById('button'); button.onclick=function() { if(ul.className=='hide') { ul.className='show'; } else { ul.className='hide'; } } }, false); </script> <input type="button" id="button" value="Toggle menu"> <ul id="ul" class="show"> <li><a href="foo.html" target="i">foo</a></li> <li><a href="bar.html" target="i">bar</a></li> <li><a href="baz.html" target="i">baz</a></li> </ul> <hr> <iframe id="i" name="i" src=""></iframe> |
Lo-Fi Version | Time is now: 26th April 2024 - 07:51 PM |