How to link to and open accordion content in acc_content?

1 reply · opened May 8, 2018

BbrockoMay 8, 2018

Can I create a div id to link to content within an accordion acc_content? Or would I need to write some custom JS?

I have:

<div class="accordion accordion-lg clearfix">
<div id="acc_title1" class="acctitle">
Title1
</div>
<div id="acc_content1" class="acc_content clearfix">
content1
</div>
<div id="acc_title2" class="acctitle">
Title2
</div>
<div id="acc_content2" class="acc_content clearfix">
content2
</div>
</div>

If I make a link to acc_content2 or acc_title2, it just takes me to the top of the main accordion div. I want it to open to content2.

Much thanks.

SSemicolon WebSTAFFMay 31, 2018

Hello,

This Functionality is not included by default but definitely possible. We have created a Custom Code for you. Simply add the id="acctitle-1" to the .acctitle Element and then use it as a Link in your Address Bar. Example: page.html#acctitle-1 .

Then simply add the following code at the bottom of the Page just after the js/functions.js JS File Linking:


	jQuery(document).ready( function(){

		var windowHash = window.location.hash,
			hashElement = jQuery(windowHash);

		if( hashElement.length > 0 && hashElement.parents('.accordion').length > 0 ) {

			var accElement = hashElement.parents('.accordion');

			if( hashElement.next().is(':hidden') ) {
				accElement.find('.acctitle').removeClass('acctitlec').next().slideUp("normal");
				hashElement.toggleClass('acctitlec').next().stop().slideDown("normal", function(){
					$('html,body').stop(true).animate({
						'scrollTop': accElement.offset().top - ( SEMICOLON.initialize.topScrollOffset() - 40 )
					}, 800, 'easeOutQuad' );
				});
			}
		}
	});

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard