Expose hidden dropdown window content using unique URL

Question

I would like a dropdown I created with hidden content to open and expose itself if someone goes to a url with an anchor at the end.

For example if someone is sent a url to "domainname.com/page#!contentwindow1"

I would also like that particular dropdown to open automatically without having to click it.

Here is my code so far...

HTML:

<div class="dropdown_wrapper">
   <a href="#!window1" id="window1" class="dropdown">Title 1</a>
   <div class="hidden dropdown_content">
      <p>Hidden Content for window 1</p>
   </div>
</div>
<div class="dropdown_wrapper">
   <a href="#!window2" id="window2" class="dropdown">Title 2</a>
   <div class="hidden dropdown_content">
      <p>Hidden Content for window 2</p>
   </div>
</div>

jQuery:

$('.dropdown').click(function(){
    if($(this).hasClass('active')){
        $(this).removeClass('active');
        $(this).next('.dropdown_content').slideUp(300);
    }else{
        $(this).addClass('active');
        $(this).next('.dropdown_content').slideDown(300);
    }
});

Upon clicking one of the windows, the url gains the href that was included in the <a> tag and opens up the content that was hidden with the jQuery.

Question: How can I make it that when I share this url to someone else it will automatically or already be opened once the page loads?

score 1 · Answer 1 · edited May 23 '17 at 10:28

On document ready, you can check if the url has the content you want, let's say "yourstring":

$(function() { 
    if(window.location.hash.substring(1) == "yourstring"){
        //do your thing
    }
});

Then if it appears on the url, you get that content and search the dropdown by its href attribute. When you have the dropdown, you just need to add the class 'active', and slideDown the dropdown_content next to it.

looked up how to get the anchor value: How to get the anchor from the URL using jQuery?

Expose hidden dropdown window content using unique URL

1 Answers1