0

I am making use of the info icon as shown in the image. I want extra information to display when the icon is clicked, the closest I have gotten to making it happen is using the details element. It does not work as desired, it leaves a triangle in front of the info icon. What's the best approach solution?

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<main>
  <details>
    <summary><span class="material-icons">info</span></summary>
    <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
  </details>
</main>

I want only the icon to remain, the triangle is not wanted

I tried using the details element, then wraping my Info Material Icon in the summary. It always leaves a triangle in front of the material icon which is not the desired result

j08691
  • 204,283
  • 31
  • 260
  • 272
Atman Atos
  • 5
  • 5

1 Answers1

0

To be able to remove the triangle you can use the following code:

details summary::-webkit-details-marker {
    display:none;
}
Tacey
  • 13
  • 2
  • 6