How to open a specific accordion section on a CSS radio button accordion from another page?

Question

I have links on a page (index.html). The links go to a gallery page. The accordion section I want to open is on the gallery page.

<a href="gallery#accordion1">Accordion 1</a>
<a href="gallery#openModal2">Open Model 4</a>
<a href="gallery#ac-2">Accordion 1 section 2</a>

On the gallery page there are CSS accordions with CSS modals inside of the accordion sections that open.

The first link above opens the gallery page and brings accordion one to the top of the page, with the first section open (by default, as it is 'checked'.) A similar link to the second accordion also works the same way. The second link leads to the gallery page, and opens the modal, which would be great if that's what I wanted.

But the third link will only go to the gallery page. It won't open the section, and similar links to sections in another accordion won't bring that accordion to the top. (The gallery page is also responsive and has media queries, which bring the appropriate accordion to the top when I test it out by shrinking the browser width before clicking the link on the index page.)

What I want to happen is: click the link on the index page, go to the gallery page, bring the appropriate accordion to the top and open the corresponding accordion section.

I've looked at numerous answers on Stack Overflow. The one that comes closest to what I'm trying to do is here: Open jQuery Accordion

I also looked at many others and part of why I'm having difficulty figuring this out may be that I'm not using jQuery UI syntax (header/div/header/div/etc.)

<section class="gal-container" id="accordion1">
<!--start accordion one section 1 -->
<div class="modalDialog" id="openModal1">
    <div>
        <a class="modal-close" href="#close">&times;</a> Stuff
    </div>
</div><!-- end modal one -->
<div>
    <input checked id="ac-1" name="accordion-1" type="radio"> <label for="ac-1">Title</label>
    <article>
        <a href="#openModal1">Open Modal </a>
        <p>yadda information yadda</p>
    </article>
</div><!--start accordion one section 2 -->
<div class="modalDialog" id="openModal2">
    <div>
        <a class="modal-close" href="#close">&times;</a> Stuff
    </div>
</div>
<div>
    <input id="ac-2" name="accordion-1" type="radio"> <label for="ac-2">Title</label>
    <article>
        <a href="#openModal2">Open Modal </a>
        <p>yadda information yadda</p>
    </article>
</div>

I've tried to figure this out using both javaScript and jQuery. What I've wound up with at the moment is trying to use the link with the specific section, making the hash my variable, and then making the radio button checked.

// find the id from the link
var radio = window.location.hash;
function checkRadio {
  if radio === ("ac-1" || "ac-2" || "ac-3" || "ac-4") {
  document.getElementById("accordion1").onclick = function() {
    var openAcc = window.open(this.href);
  } else {
    document.getElementByID("accordion2").onclick = function() {
      var openAcc = window.open(this.href);
    }

    // check the radio button
    document.getElementById(radio).checked = true;
  }

My Shortish fiddle

score 0 · Answer 1 · edited May 23 '17 at 12:02

I was able to construct a partial answer using jQuery. I added this in the header of the page with the accordions on it.

 jQuery(document).ready(function() {
// get the #section from the URL
var hash = window.location.hash; 
// open accordion
 $(hash).prop("checked", true); });

This will open the correct accordion panel, from an external page, using the third link, but the correct accordion won't come to the top of the page when it is resized for mobile.

This works:

Editing because I figured out the answer (based on the answer to this question: Loading page based on external link)

If the link looks like this:

 <a class="open-local" href="#ac-1">Item 1</a>

This will open the section from any link on the same page with the open-local class:

  //For local link to accordion
  jQuery(document).ready(function() {
  $('a.open-local').click(function(){
// get the #section from the URL
var hash = window.location.hash; 
// open accordion
 $(hash).prop("checked", true);
 //scroll
var accordionTop =  $(hash).closest('section');
$('html, body').animate({
scrollTop: $(accordionTop).offset().top
    }, 500);
  });

For links coming from an external page:

var hash = window.location.hash; 
$(hash).prop("checked", true);
var accordionTop =  $(hash).closest('section');
$('html, body').animate({
        scrollTop: $(accordionTop).offset().top
    }, 500);
});

My revised fiddle is here

How to open a specific accordion section on a CSS radio button accordion from another page?

1 Answers1

This works: