Jquery Open Accordion based on URL anchor hash

Question

I have a FAQ accordion. Each question has a class name of q with id of q1 or q2 or q3. Each answer has a class name of a.

When the url has a anchor tag /faq#q2, I want the q2 to be triggered. I have the below code but its the not working.

I think the line that caused it not working is: if (hash) $(.q[id$="+hash+"]).trigger('click'); but i can't figure out whats wrong.

  $(document).ready(function($) { $(".a").hide().first().show(); $(".q:first").addClass("active"); $('#accordion').find('.q').click(function(){ //Expand or collapse this panel $(this).next().slideToggle('fast'); //Hide the other panels $(".a").not($(this).next()).slideUp('fast'); //Find anchor hash and open var hash = $.trim( window.location.hash ); if (hash) $(.q[id$="+hash+"]).trigger('click'); }); }); 

  .q {cursor: pointer;} .a {display: none;} .q.active + .accordion-content { display: block; } 

 <div id="accordion"> <h4 class="q" id="q1">Accordion 1</h4> <div class="a"> <p>Cras malesuada ultrices augue <a href="#q2" onclick="setTimeout('history.go(0);',800);">Open Accordion 2</a> molestie risus.</p> </div> <h4 class="q" id="q2">Accordion 2</h4> <div class="a"> <p>Lorem ipsum dolor sit amet mauris eu turpis.</p> </div> <h4 class="q" id="q3">Accordion 3</h4> <div class="a"> <p>Vivamus facilisisnibh scelerisque laoreet.</p> </div> </div> 

Answer 1

First of all - you've lost single or double quotes with your jQuery selector. And if I understand correctly - you want something like this?

if (hash) {
  var element = $(hash);
  if (element.length) {
    element.trigger('click');
  }
}

Update ( http://jsfiddle.net/6hzby0aa/ ):

 // Hide all panels $(".a").hide(); // Show first panel by default $(".q:eq(0)").next(".a").show(); // Get hash from query string. You can put there "#q1", "#q2" or something else for test var hash = window.location.hash; if (hash) { // Get panel header element var requestedPanel = $(hash); if (requestedPanel.length) { // Hide all panels $(".a").hide(); // Show requested panel requestedPanel.next(".a").show(); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="accordion"> <h4 class="q" id="q1">Accordion 1</h4> <div class="a"> <p>Cras malesuada ultrices augue <a href="#q2" onclick="setTimeout('history.go(0);',800);">Open Accordion 2</a> molestie risus.</p> </div> <h4 class="q" id="q2">Accordion 2</h4> <div class="a"> <p>Lorem ipsum dolor sit amet mauris eu turpis.</p> </div> <h4 class="q" id="q3">Accordion 3</h4> <div class="a"> <p>Vivamus facilisisnibh scelerisque laoreet.</p> </div> </div> 

Answer 2

This is my final Code. Thanks to @Andrew Orlov

<script type="text/javascript">
    $(document).ready(function($) {
        // Hide all panels
        $(".a").hide();

        // Show first panel by default
        $(".q:eq(0)").next(".a").show();
        $(".q:first").addClass("active");

        // Get hash from query string
        var hash = window.location.hash;

        if (hash) {
            // Get panel header element
            var requestedPanel = $(hash);
            if (requestedPanel.length) {
                // Hide all panels
                $(".a").hide();
                $('.q').removeClass("active"); // remove active
                // Show requested panel
                requestedPanel.next(".a").show();
                requestedPanel.addClass("active"); //add active
            }
        };


        $('body').find('.q').click(function() {
            //Expand or collapse this panel
            $(this).next().slideToggle('600');

            $('.q').removeClass("active"); // remove active
            $(this).addClass("active"); // add active

            //Hide the other panels
            $(".a").not($(this).next()).slideUp('fast');
        });
    });
</script>