settingsAccountsettings
Menusettings

Q: Accordion Task in HTML with DOM and JavaScript

+1 vote

An html file is given and your task is to show more/show less information by clicking a button (it is not an actual button, but a span that has an onlick event attached to it). When More link is clicked, it reveals the contents of a hidden div and change the text of the link to Less. When the same link is clicked again (now reading Less), hide the div and change the text of the link back. Link action should be toggleable (you should be able to click the button infinite amount of times).

HTML and JavaScript Code - You are given the following HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Accordion</title>
  <style>
    #accordion {
      border: 1px solid black;
      display: inline-block;
      width: 400px;
    }

    #accordion p {
      margin: 1em;
    }

    .button {
      float: right;
      background: #5555ff;
      padding: 0.1em 1em 0.1em 1em;
      color: white;
      cursor: pointer;
    }

    #extra {
      display: none;
    }

    .head {
      background: #ccccff;
      padding: 1em;
    }
  </style>
</head>
<body>
<div id="accordion">
  <div class="head">DOM Manipulations Exercise <span class="button" onclick="toggle()">More</span></div>
  <div id="extra">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>
  <script>
    function toggle() {
      // TODO
    }
  </script>
</body>
</html>

Examples:

accordion javascript task

asked in JavaScript category by user eiorgert

1 Answer

0 votes

Here is my solution - with HTML and the JavaScript code inside:
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Accordion</title>
    <style>
        #accordion {
            border: 1px solid black;
            display: inline-block;
            width: 400px;
        }

        #accordion p {
            margin: 1em;
        }

        .button {
            float: right;
            background: #5555ff;
            padding: 0.1em 1em 0.1em 1em;
            color: white;
            cursor: pointer;
        }

        #extra {
            display: none;
        }

        .head {
            background: #ccccff;
            padding: 1em;
        }
    </style>
</head>
<body>
<div id="accordion">
    <div class="head">DOM Manipulations Exercise <span class="button" onclick="toggle()">More</span></div>
    <div id="extra">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum.</p>
    </div>
</div>
<script>
    function toggle() {
        let text = document.getElementById("extra");
        let btn = document.getElementsByClassName("button")[0];

        if (text.style.display === "none") {
            text.style.display = "block";
            btn.textContent = "Less";
        } else {
            text.style.display = "none";
            btn.textContent = "More";
        }
    }
</script>
</body>
</html>

 

answered by user hues
...