[SOLVED] HTML Launch Page Accordion Control

June 28, 2011, 02:05 PM

MAdams1

Hello all,

Does anyone know how to collapse the HTML Launch Page Accordion Control on page load? I have an accordion with 10 panes. And when I run it the first one is always open so then you can't see the others without scrolling down. I have been searching everywhere for the answer but no luck.

Thank You!

Michelle

This message has been edited. Last edited by: Kerry,

June 28, 2011, 04:34 PM

prodrigu

Set the selectedIndex property.

SelectedIndex="-1"

June 28, 2011, 04:51 PM

MAdams1

Prodrigu,
This is what I am trying but keep getting an error: Expected(

//Begin onInitialUpdate function
Function onInitialUpdate(){
document.getElementById('accordion1').SelectedIndex = "-1";
}
//End onInitialUpdate function

Thanks
Michelle

June 28, 2011, 04:52 PM

MAdams1

There is suppose to be a semi-colon where that smile face is.

June 28, 2011, 04:59 PM

prodrigu

Here is an example I found online but it doesnt use the SelectedIndex="-1". I hope this helps.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

  <head>
    <title>JavaScript accordion example</title>

    <style type="text/css">
      body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
      .accordionItem h2 { margin: 0; font-size: 1.1em; padding: 0.4em; color: #fff; background-color: #944; border-bottom: 1px solid #66d; }
      .accordionItem h2:hover { cursor: pointer; }
      .accordionItem div { margin: 0; padding: 1em 0.4em; background-color: #eef; border-bottom: 1px solid #66d; }
      .accordionItem.hide h2 { color: #000; background-color: #88f; }
      .accordionItem.hide div { display: none; }
    </style>

    <script type="text/javascript">
    //<![CDATA[

    var accordionItems = new Array();

    function init() {

      // Grab the accordion items from the page
      var divs = document.getElementsByTagName( 'div' );
      for ( var i = 0; i < divs.length; i++ ) {
        if ( divs[i].className == 'accordionItem' ) accordionItems.push( divs[i] );
      }

      // Assign onclick events to the accordion item headings
      for ( var i = 0; i < accordionItems.length; i++ ) {
        var h2 = getFirstChildWithTagName( accordionItems[i], 'H2' );
        h2.onclick = toggleItem;
      }

      // Hide all accordion item bodies except the first
      for ( var i = 0; i < accordionItems.length; i++ ) {
        accordionItems[i].className = 'accordionItem hide';
      }
    }

    function toggleItem() {
      var itemClass = this.parentNode.className;

      // Hide all items
      for ( var i = 0; i < accordionItems.length; i++ ) {
        accordionItems[i].className = 'accordionItem hide';
      }

      // Show this item if it was previously hidden
      if ( itemClass == 'accordionItem hide' ) {
        this.parentNode.className = 'accordionItem';
      }
    }

    function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
      }
    }

     //]]>
    </script>
  </head>
  <body onload="init()">
    <h1>JavaScript accordion example</h1>

    <div class="accordionItem">
      <h2>About accordions</h2>
      <div>
        <p>JavaScript accordions let you squeeze a lot of content into a small space in a Web page.</p>
        <p>This simple accordion degrades gracefully in browsers that don't support JavaScript or CSS.</p>
      </div>
    </div>

    <div class="accordionItem">
      <h2>Accordion items</h2>
      <div>
        <p>A JavaScript accordion is made up of a number of expandable/collapsible items. Only one item is ever shown at a time.</p>
        <p>You can include any content you want inside an accordion item. Here's a bullet list:</p>
        <ul>
          [*]List item #1
          [*]List item #2
          [*]List item #3
        </ul>
      </div>
    </div>

    <div class="accordionItem">
      <h2>How to use a JavaScript accordion</h2>
      <div>
        <p>Click an accordion item's heading to expand it. To collapse the item, click it again, or click another item heading.</p>
      </div>
    </div>



  </body>
</html>

June 29, 2011, 09:32 AM

Francis Mariani

document.getElementById('accordion1').SelectedIndex = "-1";

It's an index, which is numeric, so remove the double quotes around -1.

June 29, 2011, 03:21 PM

MAdams1

@ prodrigu, I tried using the code to hide the accordionItem but it didn't work.

@Francis, I tried removing the quotes and this also did not work.

I noticef I had Function instead of function, so that took care of my error. But I still can't get the last accordion pane to be selected on load. I thought maybe it would be the zIndex but no luck. There must be a way to do this, as it would appear that IB has the first pane selected as a default.

Thank you both for your answers. It's still a challenge.

Michelle

December 14, 2011, 02:59 PM

Mike in DeLand

Hey, no fair. That control is grayed out in my HTML composter. How do I get that? I'm on 7703.

December 14, 2011, 03:06 PM

MAdams1

You have to select a RIA Theme first. Click on Document in the properties explorer, you'll see the RIA Theme selections there.

December 15, 2011, 07:19 AM

Mike in DeLand

WORKS! Thanks a lot.

December 15, 2011, 08:08 AM

MAdams1

No problem. That's what we are here for, to help each other out. Happy holidays!

December 15, 2011, 08:12 AM

Mike in DeLand

MAdams1,

I played around with this a little, and I wanted to have the LAST item opened on load, so that the user could see what's available above it. I got it to work by doing
document.getElementById('BiAccordionButton-52').click();

I looked in the properties window on the right to see the name of the button on the last item in the accordion control, and this worked great. Now if I could only get the background color to work I'd be really happy.

December 15, 2011, 08:47 AM

MAdams1

Awesome, thanks for sharing that. I will give it a try.

January 04, 2012, 08:54 AM

MAdams1

Mike, Thank you so much. This works awesome!!!

Michelle