Skip navigation
winrol
winrol
Currently Being Moderated

Accordion hover effect does not work with a link in the AccodionTab

Jul 31, 2012 8:59 PM

Tags: #cs5 #hover #accordion

Hi, I have an accordion widget set up on my site. http://www.emjmarketing.com

I set up the CFLAA Tab to be a link to my CFLAA page.  Here is the code:

 

<div class="AccordionPanel">

     <a href="cflaa.php"  onclick="window.location=this.href;return false;">

          <div class="AccordionPanelTab">CFLAA</div>

     </a>

          <div class="AccordionPanelTab">Emcee</div>

          Remainder of code.....

</div>

 

Now this all works fine.  When I click on CFLAA it takes me to the page just fine, but when I hover over CFLAA the hover effect for AccodionPanelTab does not work.  I have been looking around and trying different things but I can't seem to get it to work.

 

Any help would be appreciated.

 

Thanks in advance

 

Winrol

358 Views   2 Replies   Latest reply: winrol, Jul 31, 2012 10:25 PM
 
Replies
  • Ben Pleysier
    Currently Being Moderated
    1. Ben Pleysier,
    Jul 31, 2012 9:20 PM   in reply to winrol
    Report

    Change

    <a href="cflaa.php"  onclick="window.location=this.href;return false;">

       <div class="AccordionPanelTab">CFLAA</div>

    </a>

    to

    <div class="AccordionPanelTab"><a href="cflaa.php" onclick="window.location=this.href; return false;">CFLAA</a></div>

    and apply a style rule that overrides the site wide anchor element ('a') rule as in

    .AccordionPanelOpen .AccordionPanelTabHover a {

        color: red;

    }

    Gramps

     
    |
    Mark as:
  • winrol
    Currently Being Moderated
    2. winrol,
    Jul 31, 2012 10:25 PM   in reply to Ben Pleysier
    Report

    Thanks Gramps,

     

    I had to change .AccordionPanelOpen .AccordionPanelTabHover a to .AccordionPanelClosed .AccordionPanelTabHover a.  This tab never opens so it is always closed.   I also had to add .AccordionPanelTab a with the static Accordion text color.     

     

    Thanks again for the help.

     

    Winrol

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points