CODEWITHSUNDEEP
javascriptjqueryhtmlcss
michaelmcgurk
michaelmcgurk

Reputation: 6511

Open specific Accordion menu

I'd like to visit my site: http://testsite.com/#accordion2 and for it to anchor down & open the 2nd accordion. How do I achieve this? I'd also like this to happen for the first accordion if the url was #accordion1.

Here's my Fiddle: http://jsfiddle.net/jmjmotb3/

function close_accordion_section(source) {
        $(source).parent().find('.accordion-section-title').removeClass('active');
        $(source).parent().find('.accordion-section-content').slideUp(300).removeClass('open');
    }

    $('.accordion-section-title').click(function(e) {     
        if($(e.target).is('.active')) {
            close_accordion_section(e.target);
        }else {
            $(this).addClass('active');
            $(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open')
        }

        e.preventDefault();
    });
.accordion {
  overflow: hidden;
  margin-bottom: 40px;
}

.accordion-section {
  padding: 15px;
  border: 1px solid #d8d8d8;
  background: #fbfbfb;
}

.accordion-section-title {
  width: 100%;
  display: inline-block;
  background: url("http://placehold.it/50x50") top right no-repeat;
}

.accordion-section-title.active, .accordion-section-title:hover {
  text-decoration: none;
}

.accordion-section-content {
  padding: 15px 0;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="accordion1" class="accordion">
    <div class="accordion-section">
        <a class="accordion-section-title" href="#accordion-1">More information</a>
    <div id="accordion-1" class="accordion-section-content">
        <p>Text.</p>
        <p>
    </div>
    </div>
</div>
    
    <div id="accordion2" class="accordion">
    <div class="accordion-section">
        <a class="accordion-section-title" href="#accordion-1">More information 2</a>
    <div id="accordion-1" class="accordion-section-content">
        <p>Text.</p>
        <p>
    </div>
    </div>
</div>

Upvotes: 0

Views: 46

Answers (1)

Brian FitzGerald
Brian FitzGerald

Reputation: 3109

Check the window.location.hash property and go from there.

document.addEventListener('DOMContentLoaded', function() {

    if (window.location.hash === 'x') {
        // do x
    }

});

Upvotes: 1

Related Questions