I'm using HTML/CSS to create my portfolio and wanted a drop down menu with my certifications (Image below for reference).

It might be a really obvious answer but could someone help me out with how I would do this.

CodePudding user response：

While you could use an existing UI kit version (such as Bootstrap's Accordion component), or spin your own using HTML, CSS, and JavaScript, you might find the native <details> disclosure element sufficient to your needs:

details {
  border: 1px solid grey;
  padding: 0.5rem;
}

<details>
    <summary>How are you?</summary>
    Doing OK, thanks :)
</details>

<details>
    <summary>Some weather we're having, huh?</summary>
    I know!  I didn't know if I should bring a sweater or a t-shirt!
</details>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

You'll want to make sure that the tag is semantically appropriate for your content, though.

CodePudding user response：

function myfun() {

  var a = document.getElementById("drop")

  if (a.style.display != 'none') {
    a.style.display = 'none';
  } else {
    a.style.display = 'block';
  }
}

#drop {
  display: none;
}

<p onclick="myfun()"> This is dropdown. Click to drop down You can add an image like an arrow for better graphics </p>
<p id="drop"> this is the dropdown </p>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>