Skip navigation
graphimatic
graphimatic
Currently Being Moderated

spry accordion panel tab, link to a diferent page

Jan 30, 2012 4:53 AM

Tags: #spry_accordion

Hi,

 

I have a sort of catalogue section of my site made of a few pages, one for each category in my catalogue (tables, chairs, lighting, etc).

Each one of these pages has a spry accordion, which looks the same on all the pages.

 

When I click on the Accordion panel tab, the Accordion panel content (for that category) shows up, which is fine.

But when I click on the Accordion's panel tab, I would like, first for that page to show up, and then for the accordion panel content to show up.

 

This is what's happening:

Say I am on the TABLES page. When I click on the accordion panel tab "CHAIRS" the accordion panel content with the various types of chairs opens/shows, but I am still in the TABLES page.

I would like this to take me to the CHAIRS page without having to choose one of the panel contents sub-items.

 

I can't seem to be able to do it with a simple link.

 

What else do I need to do?

Thanks.

1548 Views   11 Replies   Latest reply: winrol, Jul 2, 2012 10:46 PM
 
Replies
  • Ben Pleysier
    Currently Being Moderated
    1. Ben Pleysier,
    Jan 30, 2012 5:31 AM   in reply to graphimatic
    Report

    Is this what you want to do http://backyardfurniture.com.au/? See the accordion panel used for the menu on the left.

     

    Gramps

     
    |
    Mark as:
  • graphimatic
    Currently Being Moderated
    2. graphimatic,
    Jan 30, 2012 6:11 AM   in reply to Ben Pleysier
    Report

    Yes, it is something basically like this.

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    3. Ben Pleysier,
    Jan 30, 2012 6:55 AM   in reply to graphimatic
    Report

    Well, in that case you have got your answer. Just copy rhe markup and play around with it.

     

    Gramps

     
    |
    Mark as:
  • graphimatic
    Currently Being Moderated
    4. graphimatic,
    Jan 31, 2012 3:40 AM   in reply to Ben Pleysier
    Report

    I'm afraid I'm not that good with code, I still don't know what I need to add.

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    5. osgood_,
    Jan 31, 2012 3:54 AM   in reply to graphimatic
    Report

    It looks like you have to attach an onclick event (see below)

     

    At the moment your code most probably looks something like:

     

    <div class="AccordionPanel">

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

    </div>

     

    You need to wrap the AccordionPanelTab <div> in an anchor tag like below:

     

    <div class="AccordionPanel">

    <a href="chairs.html" onclick="window.location=this.href;return false;">

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

    </a>

    </div>

     
    |
    Mark as:
  • graphimatic
    Currently Being Moderated
    6. graphimatic,
    Jan 31, 2012 4:56 AM   in reply to osgood_
    Report

    Ok, I think that did it, thanks.

    Would you mind explaining what that line of script (javascript?) means?

     

    Next problem, now I get an underline on my "new" link.

    My AccordionPanelContent links should have an underline, which they do. But not the AccordionPanelTab links.

    I had created this pseudo class, with no underline:

    .AccordionPanelTab a:link

    .AccordionPanelTab a:visited

    .AccordionPanelTab a:hover

    .AccordionPanelTab a:active

     

    but it's not working, the AccordionPanelTab link shows underlined.

    Can you help?

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    7. osgood_,
    Jan 31, 2012 5:08 AM   in reply to graphimatic
    Report

    graphimatic wrote:

     

     

    Would you mind explaining what that line of script (javascript?) means?

     

     

    Its just saying when the link is clicked go to the specified page.

     

     

    graphimatic wrote:

     

    Ok, I think that did it, thanks.

    Would you mind explaining what that line of script (javascript?) means?

     

    Next problem, now I get an underline on my "new" link.

    My AccordionPanelContent links should have an underline, which they do. But not the AccordionPanelTab links.

    I had created this pseudo class, with no underline:

    .AccordionPanelTab a:link

    .AccordionPanelTab a:visited

    .AccordionPanelTab a:hover

    .AccordionPanelTab a:active

     

     

    Try adding:

     

    .AccordionPanel a {

    text-decoration: none;

    }

     
    |
    Mark as:
  • graphimatic
    Currently Being Moderated
    8. graphimatic,
    Jan 31, 2012 5:29 AM   in reply to osgood_
    Report

    Well that gets rid of all the underlines even in the accordionPanelContent, which I wanted to be underlined...

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    9. osgood_,
    Jan 31, 2012 5:41 AM   in reply to graphimatic
    Report

    OK, try this add a 'class' to the anchor links in the AccordionPanel <div> as shown below:

     

    <a href="chairs.html" class="topLink" onclick="window.location=this.href;return false;">

     

    Then use this css:

     

    .AccordionPanel .topLink {

    text-decoration: none;

    }

     

    See what affect that has.

     
    |
    Mark as:
  • graphimatic
    Currently Being Moderated
    10. graphimatic,
    Jan 31, 2012 6:08 AM   in reply to osgood_
    Report

    Or,

     

    I change the "a tag" decoration to none

    and create the pseudo

     

    .AccordionPanelContent a {

    text-decoration: underline;

    }

     

    for my underlined content links, and don't need to add anything to the html.

     

    Thanks for your help, that seems to have solved it.

     
    |
    Mark as:
  • winrol
    Currently Being Moderated
    11. winrol,
    Jul 2, 2012 10:46 PM   in reply to graphimatic
    Report

    Hi I am trying to do the same thing.  Open a page when I click on a tab and have the tab open at the same time.

    I changed my code to the following.

     

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

            <div class="AccordionPanel">

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

                <div class="AccordionPanelContent"><br />

                      <p><a href="../Bpage.php">BPage</a></p>

                      <p><a href="../Dpage.php">Dpage</a></p>

                      <p><a href="../Jpage.php">Jpage</a></p>

                      <p><a href="../J2page.php">J2page</a></p>

                </div>

            </div>

            </a>

     

    So when I click the tab CFPage the pannel opens then it changes to the cfpage.php and the accordian closes.  I would like it to keep the accordion open when it changes the page.

     

    Also when I am in in split view (dw cs5) I am seeing the </a> tag in the design view in a few places. when I click on the </a> tag in code view I am being told it is being marked as invalid markup because it doesn't belong inside the tag its in.

     

    Thanks in advance for you help

    whichrtmej

     
    |
    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