UITableView accordion menu

i want to make an accordion menu with UITableView. i achieved a little but my tableView's background is transparent. so when the cell is tapped i expand it but the cell's expanded part is still transparent. my problem is how i can make a accordion menu with UItableView ? and is it possible to make it with transparent tableView ?

quote:
Danilo Celic wrote:
Try this page:
http://foundationphp.com/tutorials/spry_url_utils.php
Thanks a lot. This web page gave some answers, but now I have
a new problem:
When I test my accordion menu in a normal html page
everything works fine. When I put this accordion menu to my DW
template it stops working. The result is that every accordion's
panels are open!
Why? Can you assist me?
In template head I have this code:
<link href="../SpryAssets/SpryAccordion.css"
rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryAccordion.js"
type="text/javascript"></script>
<script type="text/javascript"
src="SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript">
var params = Spry.Utils.getLocationParamsAsObject();
</script>
And in template end just before </body> tag I have this
code:
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1",
{useFixedPanelHeights: false, defaultPanel: params.panel ?
params.panel: 0});
//-->
</script>

Similar Messages

  • Is there a way to expand all the options in the accordion menu?

    I would like to have all the tabs in the accordion menu expanded. Is there a setting or button to have all the options expanded? Thanks.

    thanks trying to help out people if i can, if you put all the years into one accordion rather than a series of accordions then you could open/close the whole lot at once, what about grouping the years into three accordions, 1998-2003, 2004-2009, 2010-2015, so at least theres a good chunk of information available / visible initially?

  • Where can I find a horizontal accordion menu tutorial

    I have googled all day looking for a horizontal accordion menu for javascript and haven't found an actual tutorial. I have found downloads, but I want learn how to make one.

    Just to clarify,  Accordions are collapsing panels (not a menu system per se).
    Spry Accordion Panels Widget
    http://labs.adobe.com/technologies/spry/articles/accordion_overview/
    Working with Spry Horizontal Drop-Menu widget
    http://labs.adobe.com/technologies/spry/articles/menu_bar/index.html
    Making a JQuery Mega Menu
    http://www.sitepoint.com/make-a-mega-drop-down-menu-with-jquery/
    jQuery Superfish Menus
    http://users.tpg.com.au/j_birch/plugins/superfish/
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

  • Using an image as label in Spry Accordion Menu

    I was wondering if it was possible to use an image instead of
    text in the spry accordion menu. I have replaced the text that is
    there with a roll-over image link however I'm unable to label it
    since it uses the text as the label and therefore can't set the
    default panel I want opened. Is there a way to do this? Thanks for
    your help.

    Stefaan Lesage wrote:
    Is this possible with Pages 09 ? And can I achieve this ?
    Is it possible to look at the Help or at the Pages User Guide
    In the English one, page 17, we may read:
    • Some graphics, such as watermarks or logos, appear on pages. These objects are called master objects. If you cannot select an object in a template, it’s probably a master object. To learn more, see “Using Master Objects (Repeated Background Images)” on page 60.
    You can drag or place objects on a page, including imported graphics, movies, and sound, or objects that you create within Pages, including text boxes, charts, tables, and shapes.
    You can also insert pages that have been preformatted for the template you’re using. Click Pages or Sections in the toolbar and choose a template page. The new page is added immediately after the page where you placed the insertion point.
    Yvan KOENIG (from FRANCE vendredi 27 février 2009 23:01:32)

  • Spry Accordion Menu Tab Link css - totally confused

    Thanks folks from an l-plater but I've totally confused myself trying to work this out and I'm hoping some fresh eyes will see the answer clear as day.  I've created a spry accordion menu with links in the actual panel tabs.  Menu and links all working fine - problem is in css styling, particularly panel tab link open and hover states which should be blue text over green background, same as non-link panel tabs.  You'll see from code that I've tried a few styles but can't get this to work.  I'm thinking I've totally overdone it and some styles are overriding others and solution is a simple deletion of some unnecessary or conflicting styles.
    Thanks so much in advance for your help - I just can't see for looking any more though I'm sure it can't be hard.
    <div id="sidebar1">
    <div id="Accordion1" class="Accordion">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"><a href="Index.html" onclick="window.location = this.href">Home</a></div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Photo Gallery</div>
        <div class="AccordionPanelContent">
        <ul>
        <li><a href="PhotoGallery.html">Gallery 1</a></li>
        </ul>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Unit Newsletters</div>
        <div class="AccordionPanelContent">
        <ul>
        <li><a href="Newsletter.html">February 2010</a></li>
        </ul>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"><a href="Sponsors.html" onclick="window.location = this.href">Sponsors</a></div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"><a href="Merchandise.html" onclick="window.location = this.href">Merchandise</a></div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"><a href="Links.html" onclick="window.location = this.href">Links</a></div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"><a href="Events.html" onclick="window.location = this.href">Events</a></div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Forms</div>
        <div class="AccordionPanelContent">
        <ul>
        <li><a href="">Joining Instructions</a></li>
        <li><a href="">Enrolment</a></li>
        <li><a href="">Next of Kin</a></li>
        <li><a href="">Volunteer Blue Card</a></li>
        </ul>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"><a href="Contact.html" onclick="window.location = this.href">Contact</a></div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"><a href="LogIn.html" onclick="window.location = this.href">Log In</a></div>
        <div class="AccordionPanelContent">
        <ul>
        <li><a href="WhatsOn.html">Whats On</a></li>
        <li><a href="PSG.html">Parent Support Group</a></li>
        </ul>
        </div>
        </div>
      </div>
    </div>
    .AccordionPanel {
    margin: 0px;
    padding: 0px;
    .AccordionPanelTab {
    background-color: #036;
    border-bottom: 1px #93b747 solid;
    margin: 0px;
    padding-left: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 12px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    text-decoration: none;
    .AccordionPanelTabOpen {
    color: #036;
    background-color: #93b747;
    display: block;
    text-decoration: none;
    .AccordionPanelTabHover {
    color: #036;
    background-color: #93b747;
    text-decoration: none;
    border-bottom: 1px solid #036;
    display: block;
    .AccordionPanelTab a {
    color: #93b747;
    margin: 0px;
    font-size: 12px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    text-decoration: none;
    display: block;
    .AccordionPanelTab a.open {
    font-color: #036;
    color: #036;
    background-color: #93b747;
    text-decoration: none;
    display: block;
    .AccordionPanelTab a.active {
    color: #036;
    background-color: #93b747;
    display: block;
    text-decoration: none;
    .AccordionPanelTab a.hover {
    color: #036;
    background-color: #93b747;
    font-weight: bold;
    text-decoration: none;
    display: block;
    .AccordionPanelTab a.close {
    color: #93b747;
    background-color: #036;
    text-decoration: none;
    display: block;
    .AccordionPanelContent {
    margin: 0px;
    padding-left: 10px;
    padding-top: 2px;
    padding-bottom: 12px;
    background: #fff;
    font-size: 12px;
    color: #036;
    font-weight: 500;
    .AccordionPanelContent ul li {
    margin-left: -40px;
    padding-top: 2px;
    padding-bottom: 2px;
    background: #fff;
    font-size: 12px;
    color: #036;
    font-weight: 500;
    text-decoration: none;
    list-style-type:none;
    list-style:none;
    .AccordionPanelContent ul li a:link {
    color: #036;
    text-decoration: none;
    list-style-type:none;
    list-style:none;
    .AccordionPanelContent ul li a:hover {
    color: #036;
    font-weight: bold;
    text-decoration: none;
    .AccordionPanelContent ul li a:visited {
    color: #036;
    text-decoration: none;
    .AccordionPanelOpen .AccordionPanelTab {
    color: #036;
    background: #93b747;
    border-bottom: 1px solid #036;
    .AccordionPanelOpen .AccordionPanelTab.a {
    color: #036;
    background: #93b747;
    border-bottom: 1px solid #036;
    .AccordionPanelOpen .AccordionPanelTabHover {
    color: #036;
    font-weight: bold;
    .AccordionPanelOpen.a .AccordionPanelTabHover.a {
    color: #036;
    font-weight: 600;
    .AccordionFocused .AccordionPanelTab {
    color: #036;
    font-weight: 600;
    a.AccordionFocused .AccordionPanelTab {
    color: #036;
    font-weight: 600;
    .AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
    color: #036;
    font-weight: 600;
    a.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
    color: #036;
    font-weight: 600;

    Yes Beth, you're right and I've corrected my css - I think - problem with AccordionPanelTab link open and hover states still happening so css still wrong.  I've uploaded site so you can see what's happening (www.11acu.org).  All tab states should be as per Photo Gallery, Newsletters and Forms.  Hover state in tab links seem okay until mouse moves away from "a href" block - rest of tab area not working so its like the two styles, ie "AccordionPanelTab" and "AccordionPanelTab a:hover" are both working at the same time but I only want the latter to work.  Now I've probably got you confused as well! lol Apologies!  Recreated css for tab links below.  Html same as in original post.  Any help much appreciated.
    .AccordionPanelTab {
    color: #93b747;
    background-color: #036;
    border-bottom: solid 1px #93b747;
    margin: 0px;
    padding-left: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    .AccordionPanelTab a {
    color: #93b747;
    background-color: #036;
    margin: 0px;
    padding-left: -10px;
    padding-top: -2px;
    padding-bottom: -2px;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    display: block;
    .AccordionPanelTab a:link {
    color: #93b747;
    background-color: #036;
    margin: 0px;
    padding-left: -10px;
    padding-top: -2px;
    padding-bottom: -2px;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    display: block;
    .AccordionPanelTab a:hover {
    color: #036;
    background-color: #93b747;
    margin: 0px;
    padding-left: -10px;
    padding-top: -2px;
    padding-bottom: -2px;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    display: block;
    .AccordionPanelTab a:active {
    color: #036;
    background-color: #93b747;
    margin: 0px;
    padding-left: -10px;
    padding-top: -2px;
    padding-bottom: -2px;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    display: block;
    .AccordionPanelOpen .AccordionPanelTab {
    color: #036;
    background-color: #93b747;
    border-bottom: solid 1px #036;
    text-decoration: none;
    .AccordionPanelTabHover {
    color: #036;
    background-color: #93b747;
    text-decoration: none;
    border-bottom: solid 1px #036;
    .AccordionPanelOpen .AccordionPanelTabHover {
    color: #036;
    background-color: #93b747;
    text-decoration: none;
    font-weight: bold;
    .AccordionFocused .AccordionPanelTab {
    color: #93b747;
    background-color: #036;
    text-decoration: none;
    .AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
    color: #036;
    background-color: #93b747;
    border-bottom: solid 1px #036;
    text-decoration: none;

  • Accordion menu HELP - sorry, very urgent

    Good afternoon, first I would like to say that I'm a completely newbie in this  things, sorry for that. I'm trying to expose my question in the most simple  way: 
    I want to make a Accordion menu, where in the content boxes  appears no only one space to work and put a link and images, but more, how many  as I want. Is correct putting a table inside the content box and make rows? Is  there any other way to build this correctly? I tried the Vertical Menu Spy, but  I don't like it because I want this to work like the accordion... don't know if  I make myselfe clear, sorry the bad english. Hope some one can help! Thanks
    PS: there goes an image to explain better

    DW Sprys and Accordions are difficult for experts to use.  If you don't have a good knowledge of HTML, CSS and JavaScripts yet, you may be better off using a commercial product.
    Project Seven Accordion Panel Magic 2
    http://www.projectseven.com/products/tools/accordion2/index.htm
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics |  Print | Media Specialists
    www.alt-web.com/
    www.twitter.com/altweb

  • Accordion menu widget behavior and contents

    I'm working on an accordion menu that is then used in a DPS folio created in InDesign.
    The accordion menu resides on the Master Pages of the articles/documents, 6 articles total.
    When the label is tapped, the accordion menu expands open >
    The label is also a link that takes the reader to a page within the folio while expanding (using the navto://documentname#page formatting) >
    Inside the content area of each label are subtopics that also navigate to different pages within the folio (also using the navto://documentname#page formatting).
    My desire is that when a label is tapped and expands, the reader can then click on each subtopic and go to that page without the accordion menu collapsing as it goes to the page.
    I'm finding that 99.9% of the time, the menu is collapsing. Other times I get the exact performance I desire.
    I'm Ok with the menu collapsing as each label is tapped, but not the subtopics.
    I've played around with setting the accordion properties by unchecking "Collapse All" and unchecking "Edit Together", but can't seem to edit these sections or the text boxes individually. It either sets ALL items in the accordion menu to Collapse All or not. No mixing of the two settings.
    Is there a way to get the desired functionality, outlined above, with the accordion menu widget?
    TIA,
    Hunter

    You can either use separate accordions for sub topic or you would need to go with unchecked collapse all and then manually edit all contents.
    Thanks,
    Sanjit

  • Accordion Menu to display image

    Hey guys,
    I am in desperate need of some knowledgeable direction. Many thanks  up front for any help!!!!!
    Situation: I am designing my company's resume page: 3 or 4 names within 6 different departments in an accordion menu.
    Currently: I have a two level accordion menu on the left (department and then names within the department.) and a anchored DIV tag on the right.
    Goal: When the user clicks on "Bob Example" text link in the "Engineering" department tab (accordion menu), I would like for it to open a picture of "Bob Example" on the right hand side.
    Problem: I've named the anchor DIV tag, "biopic" and targeted the link the same name, however, when I click on the "Bob Example" text link - it opens the picture in a separate window. I have played around with targeting so much my brain is now mush.
    Can anybody shed some light on why the "Bob Example" pic won't open on the right hand side?

    That link isn't much help. 
    All the assets are pointing to files on your local Z drive instead of the site folder.
    <script src="file:///Z|/Desktop/NEW WEBSITE/SpryAssets
    /SpryAccordion.js" type="text/javascript"></script>
    If your site is properly defined in DW, that shouldn't happen.
    Setting Up Local & Remote site folders in DW
    http://help.adobe.com/en_US/dreamweaver/cs/using/WS753df6af718a350a60097e0f131686fa2b4-7ff e.html
    Nancy O.

  • Accordion Menu - Submenu position issue

    Hello,
    I've created an accordion menu that resides in the top right corner of my website. I seem to be getting various undesired results when previewing the site.
    Desired layout: Build mode
    Undesired Result: Page Preview
    Undesired Result: Site Preview
    The top level sites work fine but when I move the submenu to the left of the menu using the X position, then preview the page or site, the submenus show up either right over the menu or way off to the left of the site, almost completely off the page. I have no idea why, please help.
    Jeff

    Hi Sanjit, thank you for your reply.
    The first image is a from the Design View, the second is a page preview in browser and the final image is a site preview in browser. My default browser is Safari (also testing in Chrome however).
    If I leave the menu with default settings, the submenus appear off the site's live area and when I preview they do not show up at all. Presumabley they are off to the right side of the site.
    The menu is and has been set to "All Pages" and not manually throught my build. Other than plaving the vertical menu widget within the accordion widget, it is more or less default with exeption of some styling.
    I will try to rebuild the menu and see if the problem is still occuring. If you have any further sugestions I would be happy to hear them.
    Thnaks again

  • Accordion Menu - need to control which panel opens

    I have an accordion menu that works fine but when I put it
    into action
    on the site, I realized that I needed the accordion to open
    up a
    different section on each new page.
    Since I have the accordion menu in an SSI (server side
    include) I don't
    want to have a different spry asset for each page. However, I
    think
    setting a session variable would work to control which
    section is opened.
    Anyone done this? What would it look like?

    quote:
    Danilo Celic wrote:
    Try this page:
    http://foundationphp.com/tutorials/spry_url_utils.php
    Thanks a lot. This web page gave some answers, but now I have
    a new problem:
    When I test my accordion menu in a normal html page
    everything works fine. When I put this accordion menu to my DW
    template it stops working. The result is that every accordion's
    panels are open!
    Why? Can you assist me?
    In template head I have this code:
    <link href="../SpryAssets/SpryAccordion.css"
    rel="stylesheet" type="text/css" />
    <script src="../SpryAssets/SpryAccordion.js"
    type="text/javascript"></script>
    <script type="text/javascript"
    src="SpryAssets/SpryURLUtils.js"></script>
    <script type="text/javascript">
    var params = Spry.Utils.getLocationParamsAsObject();
    </script>
    And in template end just before </body> tag I have this
    code:
    <script type="text/javascript">
    <!--
    var Accordion1 = new Spry.Widget.Accordion("Accordion1",
    {useFixedPanelHeights: false, defaultPanel: params.panel ?
    params.panel: 0});
    //-->
    </script>

  • Accordion Menu & Firefox

    I am using Dreamweaver CS3 along with Spry 1.6.1
    I am using an accordion menu with 4 tabs and they transition
    fine in IE7 but in Firefox there is a problem. The menu works fine
    but it expands the site as if all 4 panels are open at one time.
    Then when I click on the accordion menu the site collapses back
    together.
    If I change the height under the .AccordionPanelContent class
    in the CSS file it helps but that affects the menu in IE if I do it
    that way.
    Any ideas why it would cause the web page to spread apart
    when first loaded up in Firefox?
    Thanks!

    Do you have a sample URL that demonstrates the problem?
    --== Kin ==--

  • Links inside an accordion menu

    Hello, im almost done with my site, but i have encounterd a problem, I did an accordion menu for the main design, works perfectly, but inside one of the menus i have a gallery, ive tried diferent options, but my main problem is that every time i click any of the different button options ive created all my page scrolls to the top. Its like everything inside the accordion menu is making the page scroll back to the top! how can i disable that for the buttons inside the main accordion menu. Thank you.

    Hello, the problem im having is in the mobile site. here are the two versions, english and spanish. You will ser the problem in the portfolio section under recent projects. The two versions have a diferente type of galery bit both have the same issue. Once you click any buttons under projects the page automatically scrolls up.
    http://www.katapix.com/phone/
    http://www.katapix.com/phone/inicio.html
    im sorry for my bad english. I hope i made my point clear. Thank you for the help!

  • Accordion Menu

    Just installed SP3 and the Fix, the Accordion Menu seems not to work any more in the components section all I get is a table which I dont seem to able to do anything with (the table has 3 columns Name, Value, Bind) was this option taken out, I also noticed its not one of the Sample any more

    WHich FIx Pack did you install?
    Regards,
    Stratos

  • Accordion Menu does not do proper job

    I am using an accordion menu to select data to display on a line chart. I manipulate some data with a spinner and the graph on the line chart does not change. If I move up a label and move down again then the graph has changed.
    If I replace the accordion menu with a list box, I am able to see changes on the line chart dynamicall when I increase or decrease values with the spinner. Thoughts? Many thanks!

    Anil,
    the source data area contains calculations that can be manipulated by the values entered in the spinner. Example: Some cells contain a conversion factor and other cells contain a simple weighting factor. The weighting and the conversion factor are incremented or decreased by the values in the spinner.
    Once this calculation is done I expect the accordion menu to write the data into row x again so that the update is displayed in the line chart. If you use a list box instead of an accordion menu it works and the line chart is updated every time I change the value in the spinner.
    In the accordion case it does not seem to be the case. When I change the spinner value I have to select another label and go back again to see the changes. I assume that the accordion menu then has written new values in row x.
    Does that make any sense? Regards, Frank

  • Accordion Menu Driving a List View ?

    Hello,
    I am simply looking to have an accordion menu drive data in List View and am struggling.
    For example
    Group 1
       List a>populate a list view
       List b>populate a list view
       List c>populate a list view
    Group 2
       List a>populate a list view
       List b>populate a list view
       List c>populate a list view
    etc.
    Appreciate any feedback, seems easy but just cant seem to get it to work.  
    Thanks!

    Hi David,
    Maybe Filtered Rows can accomplish this. Please refer to thread Multiple row insertion
    If the answer can't help, please let me know.

Maybe you are looking for

  • Push one new app and Profile Manager resends them all; turn this off?

    I manage the ipads for a medium sized school district. We're using Apple Configurator on Maverics to manage about 700 ipads most of which have been updated to iOS7 and supervised manually through the mini that functions as our MDM and server. So aver

  • Sourcing Cockpit: Document still being processed in background

    Dear experts, we are facing the following problem in SRM 5.0 extended classical szenario. In transaction Sourcing Cockpit when I click on create PO I reach the "Sourcing - Document Preview" screen, where I can click on button "Process PO". Everytime

  • ORDER ID

    Hi all, what  is orderid  in FBV1 transaction? what is the relation  ship between cost center , profit center  and order id? while parking  the document i have  given only orderid  for a particular line item with out giving  the cost center and profi

  • Newbee needs suggestions for a search and replace script

    I can't figure out this scripting stuff. I looked at the scripting guide I downloaded from adobe some time ago. I am not a programmer. I do not need a script that says "hello world." I need a script that will do the following: Search selected text fr

  • Promp for new album

    A family member doesnt like iPhoto because of the lack of organization in the library. I recomended adding a album for each import to help keep things organized, however, this family member will probably not follow through with that unless iPhoto pro