Open specific accordion by clicking on a list

Asked

Viewed 897 times

0

My problem is this: I have a list (ul>li) that when you click on one of them, you should go to a page containing the specific accordions.

This is the website: www.alfacontabil.com.br

On the homepage I have Services and Queries, each with its own list.

When you click on a list item, you have to go to the page, but with the content open. Ex: If you click on Services > For your Company, on the specific page accordion should come with the open content 'For your Company'.

javascript jquery html wordpress accordion

  • So the user thinks he is going to the page of content A, but on this page has an accordion with content A, B and C? divide these contents? To do this you want, you will have to add a Reader in the "load" event of the page, and check if an anchor (#) has been specified. If it was, you have to hide the default accordion tab, and then show the correct tab... It’s worth it?

2 answers

0


I managed to solve my problem with the following script: 

jQuery(document).ready(function(){

        //Get the selected accordion index, based on the URL hash.
        var index = jQuery('#tabs h3').index(
            jQuery('#tabs h3 a[href="'+window.location.hash+'"]')
            .parent());

        //The index will be -1 if there is no hash in the URL.  This
        //is necessary if we want the first section expanded by default.
        if (index < 0){
            index = 0;
        }

        //The change event handler will add the hash to the URL when
        //a section is selected.
        var change = function(event, ui){
            window.location.hash = ui.newHeader.children('a').attr('href');
        }

        //Build the accordion, using the URL hash selection and the
        //change event handler.
        jQuery('#tabs').accordion({
            active: index,
            change: change,
            collapsible: true
        });

    });

0

You can use this code on each page once they have the well-defined hash/url and equal to anchor:

var hash = window.location.hash; // ir buscar a string no url, por exemplo #para-sua-empresa
var esteHash = jQuery('#tabs [href="' + hash + '"]').index(); // saber que posição essa ancora com o nome que o hash capturou tem
jQuery("#tabs").accordion( "option", "active", esteHash ); // abrir a opção com o valor pretendido

  • Hello Sire, I couldn’t do it using your example.

Browser other questions tagged javascript jquery html wordpress accordion

You are not signed in. Login or sign up in order to post.