Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ collapse list items after link click
Posted by: dualshock Dec 4 2020, 03:00 AM
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>
<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>
Posted by: pandy Dec 4 2020, 10:37 AM
It works. But the page is so short it can't scroll.
Posted by: Christian J Dec 4 2020, 11:39 AM
QUOTE(dualshock @ Dec 4 2020, 09:00 AM) 
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.
Posted by: pandy Dec 4 2020, 02:17 PM
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.
Posted by: dualshock Dec 6 2020, 07:12 PM
QUOTE(Christian J @ Dec 5 2020, 12:39 AM)
QUOTE(dualshock @ Dec 4 2020, 09:00 AM)
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
Posted by: Christian J Dec 7 2020, 11:49 AM
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;}
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>
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>
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)