www.webdeveloper.com
Results 1 to 10 of 10

Thread: Multiple divs in toggle

  1. #1
    Join Date
    Aug 2012
    Posts
    7

    Smile Multiple divs in toggle

    I cannot seem to find an answer to this question, hopefully one of you generous people can help out. I am trying to insert multiple toggle functions with content under each button that is hidden or shown only when clicking each respective +/ - button. However, with this code, only the content under the first button seems to show/disappear. Thank you in advance!

    <button onclick="toggleContent()">+/-</button><b> Goals</b>
    <div ID="content" style="display:block;">
    <br/>
    <ul>
    <li> - Develop, maintain, and publish Chart of Accounts segment definitions, segment values and descriptions, and standards for their application to HPHC financial transactions that need to be recorded in the General Ledgers (either the Corporate Book or the Provider Book.)</li>
    <li> - Provide business direction on Chart of Account segment value derivation and assignment as it relates to financial transactions generated from new business ventures, new products, system development and data integration initiatives.</li>
    <li> - Administer change management controls and associated notification procedures when:</li>
    <li> - Additions/changes are made to segment values of the Chart of Accounts</li>
    <li> - Additions /modifications are made to all Financial Management System (FMS)* financial transaction mapping documents which support journal entries, R5, AR, etc.</li>
    <li>Define, maintain and publish metrics (yet to be defined).</li></ul>
    <br/>
    * Including the Oracle eBusiness Suite of products as well as the various ODS (Operational Data Store) applications that produce transactions that are interfaced into the Oracle eBusiness suite.
    </div>
    <div>
    <script type="text/javascript">
    function toggleContent() {
    // Get the DOM reference
    var contentId = document.getElementById("content");
    // Toggle
    contentId.style.display == "block" ? contentId.style.display = "none" :
    contentId.style.display = "block";
    }
    </script>
    <br/>
    <style>
    <!--
    .tab { margin-left: 50px; }
    -->
    </style>
    </div>
    </div>
    <button onclick="toggleContent()">+/-</button><b> Scope</b><br/>
    <h3>Responsibilities<h3>
    <div ID="content" style="display:block;">
    <ul>
    <li> - Provide business direction on Chart of Accounts segment definition, values and their application to HPHC financial transactions. </li>
    <li> - Provide clarification as needed to business stakeholders on existing Chart of Account segment definitions and values. </li>
    <li> - Provide business oversight to the FMS mapping documents which support journal entries relating to the General Ledger, R5 Application, Accounts Receivable, HPI, United, etc. </li>
    <li> - Ensure all mapping documents are up to date, accurate and readily available to stakeholders.</li>
    <li> - Administer change management procedures (identify need for modifications in response to business initiatives, receive approval for needed changes, and oversee activities associated with applying these changes within the Financial Management System). </li>
    <li> - <p class="tab">Lead discussions on the use of the Chart of Accounts:</p></li>
    <li> - <p class="tab"> Identify deficiencies in existing Chart of Account segment descriptions and definitions, identify options for their resolution, and propose solutions.</p></li>
    <li> - <p class="tab"> Participate in impact assessments of proposed Chart of Account changes to downstream dependent processes and systems (HR, budget management, etc.)</p></li>
    <li> - <p class="tab"> Evaluate new business initiatives (i.e., business model changes, new product launches, and technical development initiatives) relative to Chart of Account assignment and financial/analytic reporting needs.</p></li>
    <li> - <p class="tab"> Ensure that newly proposed mapping meets financial operations and corporate reporting needs.</p></li>
    </ul>
    <br/>
    </div>
    <script type="text/javascript">
    function toggleContent() {
    // Get the DOM reference
    var contentId = document.getElementById("content");
    // Toggle
    contentId.style.display == "block" ? contentId.style.display = "none" :
    contentId.style.display = "block";
    }
    </script>
    </div>

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Lightbulb

    Difficult to tell how it should look from your code, but this is my SWAG.
    Code:
    <script type="text/javascript">
    function toggleContent(IDS) {
    // Get the DOM reference
      var contentId = document.getElementById(IDS);
    // Toggle
      contentId.style.display == "block" ? contentId.style.display = "none" : contentId.style.display = "block";
    }
    </script>
    
    <style>
    .tab { margin-left: 50px; }
    </style>
    
    <button onclick="toggleContent('content0')">+/-</button><b> Goals</b>
    <div ID="content0" style="display:block;">
     <br/>
      <ul>
       <li> - Develop, maintain, and publish Chart of Accounts segment definitions, segment values and descriptions, and standards for their application to HPHC financial transactions that need to be recorded in the General Ledgers (either the Corporate Book or the Provider Book.)</li>
       <li> - Provide business direction on Chart of Account segment value derivation and assignment as it relates to financial transactions generated from new business ventures, new products, system development and data integration initiatives.</li>
       <li> - Administer change management controls and associated notification procedures when:</li>
       <li> - Additions/changes are made to segment values of the Chart of Accounts</li>
       <li> - Additions /modifications are made to all Financial Management System (FMS)* financial transaction mapping documents which support journal entries, R5, AR, etc.</li>
       <li>Define, maintain and publish metrics (yet to be defined).</li>
      </ul>
      <br/>
    * Including the Oracle eBusiness Suite of products as well as the various ODS (Operational Data Store) applications that produce transactions that are interfaced into the Oracle eBusiness suite.
     </div>
    
     <div> <br/> </div>
    </div>
    
    <button onclick="toggleContent('content1')">+/-</button><b> Scope</b><br/>
    <h3>Responsibilities<h3>
    <div ID="content1" style="display:block;">
     <ul>
      <li> - Provide business direction on Chart of Accounts segment definition, values and their application to HPHC financial transactions. </li>
      <li> - Provide clarification as needed to business stakeholders on existing Chart of Account segment definitions and values. </li>
      <li> - Provide business oversight to the FMS mapping documents which support journal entries relating to the General Ledger, R5 Application, Accounts Receivable, HPI, United, etc. </li>
      <li> - Ensure all mapping documents are up to date, accurate and readily available to stakeholders.</li>
      <li> - Administer change management procedures (identify need for modifications in response to business initiatives, receive approval for needed changes, and oversee activities associated with applying these changes within the Financial Management System). </li>
      <li> - <p class="tab">Lead discussions on the use of the Chart of Accounts:</p></li>
      <li> - <p class="tab"> Identify deficiencies in existing Chart of Account segment descriptions and definitions, identify options for their resolution, and propose solutions.</p></li>
      <li> - <p class="tab"> Participate in impact assessments of proposed Chart of Account changes to downstream dependent processes and systems (HR, budget management, etc.)</p></li>
      <li> - <p class="tab"> Evaluate new business initiatives (i.e., business model changes, new product launches, and technical development initiatives) relative to Chart of Account assignment and financial/analytic reporting needs.</p></li>
      <li> - <p class="tab"> Ensure that newly proposed mapping meets financial operations and corporate reporting needs.</p></li>
     </ul>
     <br/>
    </div>
    Main problem is that ID values MUST BE UNIQUE. If you have duplicated id='content' assignments,
    the browser gets very confused with the document.getElementById() command. (Which one do you want???)

    BTW: You should enclose you code between [ code] and [ /code] tags (without the spaces)
    to make it easier for forum members to read, copy, test and it preserves your formatting as well.

    Good Luck!

  3. #3
    Join Date
    Aug 2012
    Posts
    7

    Hide content Initially

    That was awesome, thanks much! One last thing, I have been scouring forums and cannot seem to find a way to initially have the content hidden. Any suggestions on how to do that?

    Thank you much for all your help!

  4. #4
    Join Date
    Nov 2010
    Posts
    1,029
    change
    Code:
    style="display:block;"
    to
    Code:
    style="display:none;"
    in the div tags

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Lightbulb

    Or change all
    Code:
    <div ID="content0" style="display:block;">
    to
    Code:
    <div ID="content0" class="divContent">
    and add class to style section
    Code:
    <style>
    .tab { margin-left: 50px; }
    .divContent { display:none; }
    </style>

  6. #6
    Join Date
    Aug 2012
    Posts
    7
    Thank you, much appreciated!

  7. #7
    Join Date
    Sep 2012
    Posts
    2
    I've been stuck on how to do something like this for a few weeks now. Thanks. Quick question how do I go about hiding a div when another button is selected to display its corresponding div. Currently the only way to remove a visible div is to click its corresponding button again. I only want to be able to display the div that matches the id of the button that I selected and hide the div that is being displayed before another button is clicked.

  8. #8
    Join Date
    Nov 2010
    Posts
    1,029
    Code:
    <script type="text/javascript">
    var shown;
    
    function showDiv(divId){
    if (shown){document.getElementById(shown).style.display="none";}
    document.getElementById(divId).style.display="block";
    shown=divId;
    }
        </script>

  9. #9
    Join Date
    Sep 2012
    Posts
    2

    Thanks

    Thanks, that was exactly what I needed.

  10. #10
    Join Date
    Aug 2012
    Posts
    7
    This has nothing to do with this thread, however I am relatively new here and I made a separate post about header locks and scroll bars here:

    http://www.webdeveloper.com/forum/sh...t=#post1223847

    It has only 1 view after a week....that 1 view is from me. Any idea how that's possible, or why its not getting any traffic?? Any suggestions on a solution or how to drive more traffic?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles