Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How can I link to an expand/collapse section and have it open automatically?

    I am trying to get the bootstrap expand/collapse details to open automatically when you link to them from another page.

    An example of this is I want to link to a page similar to Agriculture and Agri-Food Canada Service Standards ? Quarterly Results: Fiscal Year 2018-2019 - Agriculture and Agri-Food Canada (AAFC), which has a bunch of expand/collapse sections. What I want to be able to do though, is to link to a specific one and have only it open. So, if I wanted to link to AgriStabilty on the above page from somewhere else, I want the page jump down to that section (easy enough), but I also want it to be opened as well. If I link to Geospatial Products from somewhere else, I want it to go to that section and have it be open.

    I know with the tabs in bootstrap, you can link to a specific tab and have it be open. I do not see anything stating that can be done with the expand/collapse. It seems to require jQuery, which I know nothing about.

    Our site is also templated in a content management system, so I have no access to any of the scripts or CSS, only to what I can put in the body section.

    We've already tried adding &open to the link on the starting page before the anchor (i.e. ?id=1553800901644&open#ar) and then added the following script before the content and after the content

    Link on starting page:

    Code:
    <a href="?id=1553800901644&open#ar">
    HTML on target page for above destination:

    Code:
    <details id="ar">
          <summary>Arabic <i lang="ar">العربية</i></summary>
      stuff goes here
    </details>
    JavaScript:

    Code:
    <script>
    function getAnchor() {
        var currentUrl = document.URL,
         urlParts   = currentUrl.split('#');
    
        return (urlParts.length > 1) ? urlParts[1] : null;
    }
    
    if(document.URL.indexOf("&open") != -1) {
         document.getElementById(getAnchor()).click();
    }
    </script>
    We were hoping it would go to the right place on the page (which it does), and then mimic clicking on the link to expand the collapsed content. However, the &open does not get added to the URL of the destination page when it opens. So nothing above works except the anchor. It seems like something is overriding the &open addition to the URL.

    Does anyone know how to do this given the restrictions at hand?

  2. #2
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,382
    Thanks
    4
    Thanked 484 Times in 472 Posts
    If you're going to have all that content in the markup anyways, this simply isn't JavaScript's flipping job! This is more a job for :target. You give each section an ID, and you show/hide the content based on if the #id:target {} is firing. To show all, you would then use a parent DIV's #id:target to trigger all the children.

    Then you don't have to waste time screwing around attaching JS all over the place whatsoever!

    For example:

    Code:
    <div class="toggleSections" id="toggleAll">
    
    	<h2>Describe this section</h2>
    	<ul class="toggles">
    		<li><a href="#toggleAll">Show All</a></li>
    		<li><a href="#">Close All</a></li>
    	</ul>
    
    	<div class="subsection" id="section1">
    		<h3><a href="#section1">Section 1</a></h3>
    		<div class="toggleContent">
    			<p>Your content would go here</p>
    		<!-- .content --></div>
    	<!-- .subsection --></div>
    	
    	<div class="subsection" id="section2">
    		<h3><a href="#section2">Section 2</a></h3>
    		<div class="toggleContent">
    			<p>Your content would go here</p>
    		<!-- .content --></div>
    	<!-- .subsection --></div>
    
    	<div class="subsection" id="section3">
    		<h3><a href="#section3">Section 3</a></h3>
    		<div class="toggleContent">
    			<p>Your content would go here</p>
    		<!-- .content --></div>
    	<!-- .subsection --></div>
    	
    <!-- .toggleSections --></div>
    Then for the CSS:

    Code:
    .toggleContent {
    	/*
    		aPo instead of display:none so screen readers and search won't
    		ignore this content!
    	*/
    	position:absolute;
    	left:-999em;
    	top:-999em;
    }
    
    .subsection:target .toggleContent,
    .toggleSections:target .toggleContent {
    	position:static; /* shows it by ignoring all positioning */
    }
    
    .subsection h3 a:before {
    	content:"\25BC Show";
    	padding-left:0.4em;
    }
    
    .toggleSections:target .subsection h3 a:before {
    	content:"";
    }
    
    .subsection:target .subsection h3 a:before {
    	content:"\25B2 Hide";
    }
    This is a very rough example, might be some typo's, but should give you an idea of what to go about doing. The only disadvantage to this approach is you can only have one subsection open at once when selecting one at a time. You can either open/close them all, or open them individually closing all others.

    If you want to open multiples at once selectively, an checkbox INPUT:checked using adjacent sibling selectors may be the best choice, but has the issue that the currently open items aren't retained across visits by being put into the URI. That's when JS would get involved trapping the onchange of the checkboxes and applying them in realtime to the current URI via serialization. Even then the HTML/CSS would/should be doing the heavy lifting, not the JS.

    Side note, want to see an example of why HTML 5 brings NOTHING of value to the table and just confuses matters further, look at the source of that page you linked to. What the bloody blue blazes makes a TABLE a mathematical or scientific FIGURE? Or the pointless DETAILS tag that doesn't actually work anyplace for what it's allegedly for? Or the SUMMARY that has no structural navigation meaning doing an obvious numbered heading's job? What makes a bunch of full headings and table sections a bloody list of "short grammatical bullet points"?!? Uhg.
    Last edited by deathshadow; Apr 14th, 2019 at 05:10 AM.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  3. #3
    New Coder
    Join Date
    Dec 2006
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That will require more access to the page than I have, so it looks like I will have to go a different route.

    Side note, the <figure> tag is not just for mathematical or scientific content. It's for any self-contained content. Details and summary seem to function just as they are described to.

  4. #4
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,382
    Thanks
    4
    Thanked 484 Times in 472 Posts
    Quote Originally Posted by eday_2010 View Post
    Side note, the <figure> tag is not just for mathematical or scientific content. It's for any self-contained content. Details and summary seem to function just as they are described to.
    In which case it's either redundant to the already pointless ASIDE, redundant to the use of numbered headings or HR (just like HEADER, FOOTER, ARTICLE, and MAIN), or as presentational in concept as CENTER (which is also one of ASIDE's faults).

    There are a lot of things like that in HTML 5 that pretty much screams that the WhatWG didn't know enough HTML to make HTML 4 Strict's successor... and that's just the new tags, not the stuff that was rejected in 4 Strict like EMBED and TARGET for a reason.
    Last edited by deathshadow; Apr 15th, 2019 at 11:49 PM.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •