CODEWITHSUNDEEP
javascripthtmlcss
RachelBell
RachelBell

Reputation: 1

How to open part of an accordion when clicking on a link in the same page

I have a page which has accordion functionality closed by default and opens when content is clicked, indicated by arrows. I have a link at the very top of the page and I would like it to jump to a specific section of the accordion content and open it. I am having great difficulty in getting this to work as my Javascript knowledge is very limited! It currently does nothing. Any help would be appreciated.

I have tried an anchor link in the top of the page which jumps to the area of the accordion with the content, but I am not sure what to try next to get the content section to open.

Here is the initial link that I would like to anchor and open accordion content when clicked:

<p class="text_center"> 
  We've made some changes to our Privacy Policy - 
  <a href="#updates" style="color:red; text-decoration:none;">
    <span style="color:red;">
      <strong>click here</strong> 
      to see the changes
    </span>
  </a>
</p>

Here is the accordion section I would like to open when the link is clicked:

<div class="about-panel2" id="updates">

Here is the CSS for 'about-panel2':

.about-panel2 {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

Here is the Script:

<script>
  var acc = document.getElementsByClassName("about-accordion2");
  var i;
  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight){
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      } 
    });
  }
</script>

When clicked, the page attempts to jump to the content, but the accordion doesn't show. I am aware I need to amend (?) the script to make this work but I have no idea what to do next! Any help would be greatly appreciated. Thanks in advance.

Upvotes: 0

Views: 1319

Answers (2)

saurabh
saurabh

Reputation: 2713

you can do that by adding the active class to that accordion on click of that link.

Example:

adding onClick event 

<p class="text_center"> 
  We've made some changes to our Privacy Policy - 
  <a href="#updates" style="color:red; text-decoration:none;" onclick="openAccordian('updates')">
    <span style="color:red;">
      <strong>click here</strong> 
      to see the changes
    </span>
  </a>
</p>

adding a function in script

<script>
  function openAccordian(id) {
    document.getElementById(id).classList.toggle("active");
  }

</script>

Upvotes: 1

Will
Will

Reputation: 389

Hi Rachel and welcome to SO.

To do this you need to insert a small amount of JS

var hash = window.location.hash;
var anchor = $('a[href$="'+hash+'"]');
if (anchor.length > 0){
anchor.click();
}

This allows the accordion to be opened from an external link. For a more detailed example and explanation please visit this tutorial

Upvotes: 0

Related Questions