The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> collapse list items after link click
dualshock
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 4 2020, 10:37 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



It works. But the page is so short it can't scroll.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 4 2020, 11:39 AM
Post #3


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 4 2020, 02:17 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
dualshock
post Dec 6 2020, 07:12 PM
Post #5





Group: Members
Posts: 2
Joined: 4-December 20
Member No.: 27,669



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 7 2020, 11:49 AM
Post #6


.
********

Group: WDG Moderators
Posts: 9,630
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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 05:26 AM