PDA

View Full Version : Accordian Content Script - identify current page link



awp
07-30-2012, 05:07 PM
1) Script Title: Accordian Content Script v.20

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm

3) Describe problem:
I'm using the Accordian content script (2.0) out of the box where each header contains a bulleted list of links. I simply want to highlight the background of the current selected menu list item. For instance if you click on the third link under the first header, that link box will now show with a different background when that page loads. I've got to be missing something simple. Any help appreciated. :confused: Thanks!

ddadmin
07-30-2012, 08:11 PM
In the initialization code of the script, you can make use of the "toggleclass" option to apply a CSS class to each header when it's expanded (and removed automatically when it's not):


toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]

So in the above case you'd simply define a "selected" class in your CSS that applies the desired style to the selected header. Here's an example: http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-apple.htm

awp
08-01-2012, 05:43 PM
Sorry... I don't think i'm explaining myself well. Let's say you have the menu below in a page. When i click on the 2nd link beneath the header "CSS Library", (the link to "Vertical CSS Menus" in this case), when that page loads with this menu, i want not only the header group to expand but i also want THAT individual linked box beneath the 'submenu' to have a different background to indicate you are currently on that page. Does that make sense?

thanks!
awp



<div class="urbangreymenu">
<h3 class="headerbar"><a href="http://www.dynamicdrive.com/style/">CSS Library</a></h3>
<ul class="submenu">
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li>
</ul>
...
</div>


See http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-urban.htm for reference.