select current page in jquery accordion menu in master page : The Official Microsoft ASP.NET Forums

Reply

jayajangiti

Member

14 Points

30 Posts

select current page in jquery accordion menu in master page

Apr 24, 2012 02:04 PM|LINK

Hi All,

I have a menu in master page for which I am using jquery accordion plugin. Below is my jquery code

$(document).ready(function() {
       $("#acc1").accordion({
           alwaysOpen: false,
           autoheight: false,
           header: 'a.acc1',
           clearStyle: true
       });

});

****Menu HTML in Master Page****

<ul id="acc1">
<li>
     <a>Header-1</a>
     <div>
       <a href="link-1.aspx">Link-1</a><br />
       <a href="link-2.aspx">Link-2</a><br />
       <a href="link-3.aspx">Link-3</a>
     </div>
   </li>
   <li>
     <a>Header-2</a>
     <div>
       <a href="link-4.aspx">Link-4</a><br />
       <a href="link-5.aspx">Link-5</a><br />
       <a href="link-6.aspx">Link-6</a>
     </div>
   </li>
</ul>

I want the accordion menu to be open when a page corresponding to that link is clicked in the menu.

Anyone please help. I have been trying to acheive this since a week and posting it as a last option on forums.

Thanks

Reply

robwscott

Star

8079 Points

1491 Posts

Re: select current page in jquery accordion menu in master page

Apr 24, 2012 02:59 PM|LINK

i'm assuming "link-5.aspx" is your page name?

i didn't test this, but i'm fairly sure it will work (perhaps a tweak or 2)

lets say you have 2 pages: About and Contact

$(document).ready(function() {
   $("#accordion").accordion({

       collapsible: true,
       animated: 'slide',
       autoHeight: false,
       navigation: true
   });

    function GetCurrentPageName() {
          var sPath = window.location.pathname;
          var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
          var index = sPage.indexOf('.');
          sPage = sPage.substring(0, index);
          return sPage.toLowerCase();
    }

    var thisPage = GetCurrentPageName();

    $('#accordion a').each(function() {
      if (thisPage == $(this).attr('class')) {
          $(this).addClass('active');
      }
    });
});

<div id="accordion">
  <h3><a class="contact" href="#">Contact</a></h3>
  <div>
    some stuff
  </div>
  <h3><a class="about" href="#">About</a></h3>
  <div>
    some stuff
  </div>
</div>

Please post your code for us to help!!
Mark Answered if it helps - Good luck!
Cheers!
Design And Align
- Rob

Edited by robwscott on Apr 24, 2012 02:59 PM
Edited by robwscott on Apr 24, 2012 02:59 PM
Edited by robwscott on Apr 24, 2012 03:04 PM
Edited by robwscott on Apr 24, 2012 03:05 PM

Reply

Motley

Star

13789 Points

2449 Posts

MVP

Re: select current page in jquery accordion menu in master page

Apr 24, 2012 03:44 PM|LINK

Stealing some of the above poster's code, try this:

function GetCurrentPageName() {
          var sPath = window.location.pathname;
          var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
          var index = sPage.indexOf('.');
          sPage = sPage.substring(0, index);
          return sPage.toLowerCase();
    }

    var thisPage = GetCurrentPageName()+'.';

$('#acc1 a[href*="'+thisPage+'"]').parent().siblings('a').click();

These would also work:

$('#acc1 a[href*="'+thisPage+'"]').closest('li').find('a').eq(0).click(); // Click the first hyperlink in the li that is the parent of a hyperlink that has the href of our page.

$('#acc1 a[href*="'+thisPage+'"]').parent().prev().click(); // Click the previous sibling of the parent of the hyperlink that has our href

$('#acc1 li:has(a[href*="'+thisPage+'"]) > a').click(); // Click the hyperlink that is directly beneath the li that has a hyperlink that has our href

Reply

Motley

Star

13789 Points

2449 Posts

MVP

Re: select current page in jquery accordion menu in master page

Apr 24, 2012 03:51 PM|LINK

Yoew, I dunno what I was thinking, sorry here:

function GetCurrentPageName() {
          var sPath = window.location.pathname;
          var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
          var index = sPage.indexOf('.');
          sPage = sPage.substring(0, index);
          return sPage.toLowerCase();
    }



$(document).ready(function() {

var tabno=$('#acc1 li:has(a[href*="'+GetCurrentPageName()+'."])').prevAll().length+1;
        $("#acc1").accordion({
            alwaysOpen: false,
            autoheight: false,
            header: 'a.acc1',
            clearStyle: true,
active: tabno
        });

});

According to the jQuery UI docs, this should also work, but I've never done it this way:

    function GetCurrentPageName() { 
          var sPath = window.location.pathname; 
          var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
          var index = sPage.indexOf('.');
          sPage = sPage.substring(0, index); 
          return sPage.toLowerCase(); 
    }



$(document).ready(function() {
        $("#acc1").accordion({
            alwaysOpen: false,
            autoheight: false,
            header: 'a.acc1',
            clearStyle: true,
active: '#acc1 li:has(a[href*="'+GetCurrentPageName()+'."])'
        });

});

Edited by Motley on Apr 24, 2012 03:58 PM
Edited by Motley on Apr 24, 2012 04:00 PM

Reply

jayajangiti

Member

14 Points

30 Posts

Re: select current page in jquery accordion menu in master page

Apr 24, 2012 04:56 PM|LINK

Thank you very much for your quick response guys.

@robwscott and @Motley - your solutions did not work for me

Below is my menu structure

<ul id="acc1" class="ui-accordion-container">
    <li>
        <a class="ui-accordion-link acc1">Menu-1</a>
        <div>
            <a id="basicTag" class="ui-accordion-innerlink" href="Link1.aspx">Link1</a><br />
            <a class="ui-accordion-innerlink" href="Link2.aspx">Link2</a>
        </div>
    </li>
    <li>
        <a class="ui-no-accordion" href="Link3.aspx">Menu-2</a>
    </li>
    <li>
        <a class="ui-accordion-link acc1">Menu-3</a>
        <ul class="ui-accordion-container" id="acc2">
            <li>
                <a class="ui-accordion-link acc2">SubMenu-1</a>
                <div>
                    <a class="ui-accordion-innerlink" href="Link4.aspx">Link4</a><br />
                    <a class="ui-accordion-innerlink" href="Link5.aspx">Link5</a>
                </div>
            </li>
            <li>
                <a class="ui-accordion-link acc2">SubMenu-2</a>
                <div>
                    <a class="ui-accordion-innerlink" href="Link6.aspx">Link6</a><br />
                    <a class="ui-accordion-innerlink" href="Link7.aspx">Link7</a>
                </div>
            </li>
        </ul>
    </li>
</ul>

I sincerely apologize for my previous menu html. Thought I was unaware of some jquery-accordion plugin function. Above is the menu I am trying to achieve with accordion feature. All the aspx pages are content pages and menu is in master page.

I am also ready to try any different plugin that would make this accordion menu in master page work.

Please suggest.

Edited by jayajangiti on Apr 24, 2012 05:27 PM

Reply

bhaskar.mule

Contributor

2270 Points

659 Posts

Re: select current page in jquery accordion menu in master page

Apr 24, 2012 04:59 PM|LINK

hi

i hope it will help you

http://csharpektroncmssql.blogspot.com/2011/11/get-file-name-and-change-active-menu.html

Bhaskar.Mule
Site:Rare technical solutions

Reply

robwscott

Star

8079 Points

1491 Posts

Re: select current page in jquery accordion menu in master page

Apr 24, 2012 05:16 PM|LINK

you want the Menu or SubMenu to open up?

honestly i think part of your problem is your accordion is not set up correctly. if you look at any of the jquery accordion demo's, and view the source, you'll see that yours isn't anywhere near what they have. now i'm not saying that you cannot achieve what you are trying

i think this below if more of the layout you want

<div id="accordion">
     <a class="ui-accordion-link acc1" href="#">Menu-1</a>
     <div>
         <a id="basicTag" class="ui-accordion-innerlink" href="Link1.aspx">Link1</a><br />
         <a class="ui-accordion-innerlink" href="Link2.aspx">Link2</a>
     </div>
     <a class="ui-no-accordion" href="Link3.aspx">Menu-2</a>
     <a class="ui-accordion-link acc1" href="#">Menu-3</a>
     <div>
        <ul class="ui-accordion-container" id="acc2">
            <li>
                <a class="ui-accordion-link acc2" href="#">SubMenu-1</a>
                <div>
                    <a class="ui-accordion-innerlink" href="Link4.aspx">Link4</a><br />
                    <a class="ui-accordion-innerlink" href="Link5.aspx">Link5</a>
                </div>
             </li>
             <li>
                 <a class="ui-accordion-link acc2" href="#">SubMenu-2</a>
                 <div>
                    <a class="ui-accordion-innerlink" href="Link6.aspx">Link6</a><br />
                    <a class="ui-accordion-innerlink" href="Link7.aspx">Link7</a>
                 </div>
             </li>
       </ul>
     </div>
</div>

$(document).ready(function() {
   $("#accordion").accordion({ 
       collapsible: true, 
       animated: 'slide', 
       autoHeight: false, 
       navigation: true
   }); 

    function GetCurrentPageName() { 
          var sPath = window.location.pathname; 
          var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
          return sPage.toLowerCase(); 
    }

    var thisPage = GetCurrentPageName();

    $('#accordion a').each(function() {
       var href = $(this).attr('href');
       if (thisPage == href) {
            $(this).parent().parent().children('a').addClass('active');
      }
    });
});

no i understand that your menu is different, i didn't think your syntax was correct, which is why i made the change to it.

i've made a couple updates to this code since i posted the first time.

Please post your code for us to help!!
Mark Answered if it helps - Good luck!
Cheers!
Design And Align
- Rob

Edited by robwscott on Apr 24, 2012 05:19 PM
Edited by robwscott on Apr 24, 2012 05:20 PM
Edited by robwscott on Apr 24, 2012 05:25 PM
Edited by robwscott on Apr 24, 2012 05:28 PM
Edited by robwscott on Apr 24, 2012 05:30 PM
Edited by robwscott on Apr 24, 2012 05:31 PM
Edited by robwscott on Apr 24, 2012 05:35 PM

Reply

jayajangiti

Member

14 Points

30 Posts

Re: select current page in jquery accordion menu in master page

Apr 24, 2012 05:26 PM|LINK

Hi Rob,

Thank you for your response.

I want the accordion feature on both Menu and Sub-menu. Menu-3 has 2 sub-menus below it which should have accordion feature when Menu-3 is clicked wherein each submenu again has links to open aspx pages.

Yes, my menu is a little different since all the examples out there have menus and links under them. But my menu has sub-menus under menus which have links href to aspx pages. That is the reason I have pasted my entire menu html.

Please let me know if this feature can be achieved by any other menu plugins.

Reply

jayajangiti

Member

14 Points

30 Posts

Re: select current page in jquery accordion menu in master page

Apr 24, 2012 05:55 PM|LINK

Hi Rob,

I tried with the html and jquery snippet you provided, but it doesn't work. Current page menu is not being set/selected.

Your help is greatly appreciated.

Reply

robwscott

Star

8079 Points

1491 Posts

Re: select current page in jquery accordion menu in master page

Apr 24, 2012 06:05 PM|LINK

how about....

$('#accordion a').each(function() {
       var href = $(this).attr('href');
       if (thisPage == href) {
            $(this).closest('a').attr('href','#').addClass('active');
      }
    });

Please post your code for us to help!!
Mark Answered if it helps - Good luck!
Cheers!
Design And Align
- Rob

select current page in jquery accordion menu in master page RSS

28 replies

jayajangiti

select current page in jquery accordion menu in master page

robwscott

Re: select current page in jquery accordion menu in master page

Motley

Re: select current page in jquery accordion menu in master page

Motley

Re: select current page in jquery accordion menu in master page

jayajangiti

Re: select current page in jquery accordion menu in master page

bhaskar.mule

Re: select current page in jquery accordion menu in master page

robwscott

Re: select current page in jquery accordion menu in master page

jayajangiti

Re: select current page in jquery accordion menu in master page

jayajangiti

Re: select current page in jquery accordion menu in master page

robwscott

Re: select current page in jquery accordion menu in master page

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft