Scribd Logo
Upload

Welcome to Scribd!

  • HTML of Expanding Widget

    Uploaded by

    rustomarado
    3 views2 pages

    Original Title

    HTML of expanding widget

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    3 views2 pages

    HTML of Expanding Widget

    Uploaded by

    rustomarado

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    <!

    DOCTYPE html>

    <html lang=”en”>

    <head>

    <meta charset=”UTF-8”>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

    <title>Expanding Widget</title>

    <style>

    .expander {

    Margin-bottom: 10px;

    Cursor: pointer;

    Color: blue;

    Text-decoration: underline;

    .details {

    Display: none;

    Margin-left: 20px;

    </style>

    <script>

    Function toggleDetails(id) {

    Var details = document.getElementById(id);

    If (details.style.display === “none”) {

    Details.style.display = “block”;

    } else {

    Details.style.display = “none”;

    </script>

    </head>
    <body>

    <div class=”expander” onclick=”toggleDetails(‘computer’)”>Click me to view details</div>

    <div id=”computer” class=”details”>

    <h3>Parts of a Computer</h3>

    <ul>

    <li>CPU</li>

    <li>Motherboard</li>

    <li>RAM</li>

    <li>GPU</li>

    <li>PSU</li>

    <li>Storage</li>

    <li>Case</li>

    </ul>

    </div>

    <div class=”expander” onclick=”toggleDetails(‘fruits’)”>Click me to view details</div>

    <div id=”fruits” class=”details”>

    <h3>Fruits</h3>

    <ul>

    <li>Apple</li>

    <li>Orange</li>

    <li>Mango</li>

    <li>Avocado</li>

    <li>Strawberry</li>

    </ul>

    </div>

    </body>

    </html>

    You might also like