[SOLVED] HTML Launch Page Accordion Control

Set the selectedIndex property.

SelectedIndex="-1"

Prod: WebFOCUS 7.7.03: Win 2008 & AIX hub/Servlet Mode; sub: AS/400 JDE; mostly Self Serve; DBs: Oracle, JDE, SQLServer; various output formats

Posts: 121 | Location: California | Registered: June 19, 2008

Ignored post by prodrigu posted

Guru

posted

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

WebFOCUS Server 8.1.05
Windows 2008 Server
WebFOCUS AppStudio 8.1.05
Windows 7 Professional
IE 11 and Chrome Version 43.0.2357.124 m.
Mostly HTML, PDF, Excel, and AHTML

Posts: 272 | Location: Kalamazoo, Michigan | Registered: September 30, 2010

Ignored post by MAdams1 posted

Guru

posted

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

WebFOCUS Server 8.1.05
Windows 2008 Server
WebFOCUS AppStudio 8.1.05
Windows 7 Professional
IE 11 and Chrome Version 43.0.2357.124 m.
Mostly HTML, PDF, Excel, and AHTML

Posts: 272 | Location: Kalamazoo, Michigan | Registered: September 30, 2010

Ignored post by MAdams1 posted

prodrigu

Platinum Member

posted

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>

Prod: WebFOCUS 7.7.03: Win 2008 & AIX hub/Servlet Mode; sub: AS/400 JDE; mostly Self Serve; DBs: Oracle, JDE, SQLServer; various output formats

Posts: 121 | Location: California | Registered: June 19, 2008

Ignored post by prodrigu posted

Francis Mariani

Expert

posted

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

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

Francis

Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server

Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005

Ignored post by Francis Mariani posted

Guru

posted

@ 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

WebFOCUS Server 8.1.05
Windows 2008 Server
WebFOCUS AppStudio 8.1.05
Windows 7 Professional
IE 11 and Chrome Version 43.0.2357.124 m.
Mostly HTML, PDF, Excel, and AHTML

Posts: 272 | Location: Kalamazoo, Michigan | Registered: September 30, 2010

Ignored post by MAdams1 posted

Mike in DeLand

Guru

posted

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

Webfocus 8
Windows, Linux

Posts: 258 | Location: Palm Coast, FL | Registered: February 05, 2010

Ignored post by Mike in DeLand posted

Guru

posted

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

WebFOCUS Server 8.1.05
Windows 2008 Server
WebFOCUS AppStudio 8.1.05
Windows 7 Professional
IE 11 and Chrome Version 43.0.2357.124 m.
Mostly HTML, PDF, Excel, and AHTML

Posts: 272 | Location: Kalamazoo, Michigan | Registered: September 30, 2010

Ignored post by MAdams1 posted

Mike in DeLand

Guru

posted

WORKS! Thanks a lot.

Webfocus 8
Windows, Linux

Posts: 258 | Location: Palm Coast, FL | Registered: February 05, 2010

Ignored post by Mike in DeLand posted

Guru

posted

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

WebFOCUS Server 8.1.05
Windows 2008 Server
WebFOCUS AppStudio 8.1.05
Windows 7 Professional
IE 11 and Chrome Version 43.0.2357.124 m.
Mostly HTML, PDF, Excel, and AHTML

Posts: 272 | Location: Kalamazoo, Michigan | Registered: September 30, 2010

Ignored post by MAdams1 posted

Mike in DeLand

Guru

posted

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.

Webfocus 8
Windows, Linux

Posts: 258 | Location: Palm Coast, FL | Registered: February 05, 2010

Ignored post by Mike in DeLand posted

Guru

posted

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

WebFOCUS Server 8.1.05
Windows 2008 Server
WebFOCUS AppStudio 8.1.05
Windows 7 Professional
IE 11 and Chrome Version 43.0.2357.124 m.
Mostly HTML, PDF, Excel, and AHTML

Posts: 272 | Location: Kalamazoo, Michigan | Registered: September 30, 2010

Ignored post by MAdams1 posted

Guru

posted

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

Michelle

WebFOCUS Server 8.1.05
Windows 2008 Server
WebFOCUS AppStudio 8.1.05
Windows 7 Professional
IE 11 and Chrome Version 43.0.2357.124 m.
Mostly HTML, PDF, Excel, and AHTML

Posts: 272 | Location: Kalamazoo, Michigan | Registered: September 30, 2010

Ignored post by MAdams1 posted