Set "active" accordion menu after click

Question

I'm trying to set accordion menu "active" after click on link and change the page...

<div class="menu">
        <dl>
            <dt><a href="index.asp">HOME</a></dt>
            <dt><a href="#" class="submenu">QUEM SOMOS</a></dt>
                <dd>
                    <ul>
                        <li><a href="empresa.asp">EMPRESA</a></li>
                        <li><a href="institucional.asp">INSTITUCIONAL</a></li>
                        <li><a href="nossos_produtos.asp">NOSSOS PRODUTOS</a></li>
                        <li><a href="responsabilidade_social.asp">RESPONSABILIDADE SOCIAL</a></li>
                        <li><a href="responsabilidade_ambiental.asp">RESPONSABILIDADE AMBIENTAL</a></li>
                    </ul>
                </dd>
            <dt><a href="#" class="submenu">PRODUTOS</a></dt>
                <dd>
                    <ul class="produtos">
                        <%do while not rscat.EOF%> 
                        <li><a href="produtos_categoria.asp?categoria=<%= rscat("categoria")%>"><%= rscat("categoria")%></a></li>
                        <%  rscat.MoveNext
                        if rscat.EOF then Exit do %>
                        <% Loop %> 
                    </ul>
                </dd>
            <dt><a href="informativo.asp">INFORMATIVO</a></dt>
            <dt class="no_border"><a href="contato.asp">CONTATO</a></dt>
        </dl>
    </div>

jquery:

<script type="text/javascript">
    $(document).ready(function(){
        $('dd').hide();
        $('dt a.submenu').click(function(){
            $("dd:visible").slideUp("slow");
            $(this).parent().next().slideDown("slow");
            return false;
        });
    });
</script>

i'm trying too, use this https://stackoverflow.com/questions/10681033/accordion-menu-active-state-after-link-click but dont work...

what i try (but don't work):

<script type="text/javascript">

        $(document).ready(function(){
            $('dd').hide();

            var sPath = window.location.pathname;
            var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
            $("dt a.submenu[href='" + sPage + "']").parents("dd:visible").show();


            $('dt a.submenu').click(function(){
                $("dd:visible").slideUp("slow");

                var checkElement = $(this).next();
                if ((checkElement.is("dd")) && (checkElement.is(":visible"))) {
                    return false;
                }
                if ((checkElement.is("dd")) && (!checkElement.is(':visible'))) {
                    $(this).parent().next().slideDown("slow");
                    checkElement.slideDown("normal");
                    return false;
                }

            });


        });
    </script>

Well, the first sublinks ul point to especific pages, but the another sublink ul class=produtos show the categories that's on database, and uses same link on each categories like: produtos_categoria.asp?categoria=xxxxxx...

If the user, click on "EMPRESA", on the page empresa.asp the QUEM SOMOS menu need to be opened. And if the user click on some categories under the menu PRODUTOS, on the page produtos_caegoria.asp the PRODUTOS need to be opened..

I'm clear?

So.. what i need to do?

FIDDLE: http://jsfiddle.net/Qf7Js/1/

I should have emphasized on the _generated_ word. The HTML was already there but it contains some mix of, may be server-side language code? — Ejaz, May 01 '13 at 19:51
I am a bit confused. Is your issue here with the accordion, or with the page that loads when a link is pressed? — Ben Felda, May 01 '13 at 19:55
with the accordion.. I need the menu to be "open" when you click on any sublink... if you click on sublink that's inside `QUEM SOMOS` this need to be opened. And if click on any categories inside the `PRODUTOS` this must be opened too, including the next page that opens — Preston, May 01 '13 at 19:57
_if you click on sublink that's inside QUEM SOMOS this need to be opened. And if click on any categories inside the PRODUTOS this must be opened **too**_ . Are you aiming for a tree control? like the yellow part in http://www.codeproject.com/KB/custom-controls/TreeWeb/TreeWeb.gif — Ejaz, May 01 '13 at 20:22

score 1 · Accepted Answer · edited May 23 '17 at 12:12

1

check this jsfiddle to see if it does what you require. As far as I could understand the problem, you want to, on page load, automatically open the accordion menu that contains the current link. This can be achieved with following code

//say this is the current link which can be retrieved in real website using window.location object
var init_link = 'institucional.asp'

//then instead of hiding all <dd>, using $('dd').hide(), you only hide the ones that don't contain an <a> that has href equal to init_link.
$('dd').filter(function () {
    return $('a[href="' + init_link + '"]', $(this)).length == 0
}).hide();

Just change the init_link value to what the current URL. Watch out for the hostname part because your <a> might not contain absolute URL. This might help Get current URL in web browser.

To get currnet URL without the hostname part, you could (not must) use following code

var init_link = window.location.href.replace(window.location.protocol+'//'+window.location.hostname+'/', '')

edited May 23 '17 at 12:12

Community

1
1

answered May 01 '13 at 20:12

Ejaz

8,719
3
34
49

If I manually set the value of the variable, this is running ... but if I using the automatic script this don't working... – Preston May 02 '13 at 11:24
the site is at the following address: `www.example.com/test/index.asp` ok.. so.. i'm using some alert to show the variable content, and this is storing the following address: `teste/index.asp` – Preston May 02 '13 at 11:28
using this `var sPath = window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);` I got get the address correctly.. but. on links with `produtos_categoria.asp?categoria=something` this don't work... – Preston May 02 '13 at 11:36
I'll check in a bit and update my answer about getting the right URL :) – Ejaz May 02 '13 at 12:14
i make another questionm, if you like post on this: http://stackoverflow.com/questions/16337875/active-accordeon-menu-dont-work-with-sublinks-with-query-strings – Preston May 02 '13 at 12:20
BTW, if it works with `var sPath = window.location.pathname;` then it should work on URLs having query string with `var sPath = window.location.pathname+window.location.search;` – Ejaz May 02 '13 at 12:20

score 0 · Answer 2 · answered May 01 '13 at 20:00

To clarify, it seems like all you are looking to do is apply a class to the dt in addition to hiding/showing the next dd item? This can be achieved with callback functions, or by simply chaining the method on. Something like this:

<script type="text/javascript">
$(document).ready(function(){
    var $menu = $('dl.menu');
    $('dd', $menu).hide();
    $('dt a.submenu', $menu).on("click", function(e){
        e.preventDefault();
        var $parent = $(this).parent('dt');
        if($parent.hasClass('active')){
          $parent.removeClass('active').next('dd').slideUp("slow");
        } else {
          $parent.siblings('.active').removeClass('active').siblings("dd").slideUp("slow", function(){
            $parent.addClass('active').next('dd').slideDown("slow");
          });
        }
        $("dd:visible", $menu).slideUp("slow", function(){
          $(this).removeClass('active');
        });
        $(this).parent().next().slideDown("slow");
    });
});
</script>

Hope this helps provide some direction.

Set "active" accordion menu after click

2 Answers2

Linked