How To Use The < summary > And < details > Tags To Make An Interactive Cheeseburger With HTML / CSS

Getting creative with code can be a lot of fun, so I decided to use the <summary> and <details> tags to create an expandable and collapsable menu in the form of a Cheeseburger. Who doesn't enjoy cheeseburgers?!? To tackle this project I used basic HTML table elements for the layout and the summary / details tags for the menu. Using these tags allows information to be revealed and hidden at the click of a button!

The HTML code to create this is very basic. The more involved coding is the CSS, to make it look like a cheeseburger.

The tags themselves may not be supported by all browsers, if you'd like to see the current support status, visit W3Schools: details / summary.

The Demo:

An HTML/CSS CHEESEBURGER using <details> and <summary> tags
Tomatoes The tomato is a red fruit/berry and part of the nightshade Solanum lycopersicum.
Pickles A pickle is a cucumber that has been pickled in vinegar or other solution and left to ferment.
Lettuce Lettuce is an annual plant of the daisy family Asteraceae that is easily cultivated.
Cheese Cheese is a food derived from milk. There are hundreds of varieties produced all over the world.
Hamburger A Hamburger is a sandwich consisting of one or more cooked patties of ground meat inside a sliced bun.

Above is the demo of the project I made. You can interact with it by clicking on the toppings within the buns of the burger. I have the HTML and CSS below. Feel free to create your very own or even improve on the example I made. Leave your comments down below!

HTML:

<div>
<table align="center">
<tr>
<th class="btn1th" >An HTML/CSS CHEESEBURGER<br>using <details> and <summary> tags</th>
<tr>
<td class="tomatoes">
<details>
<summary class="Sum1">Tomatoes</summary>
<p class="Para1">
The tomato is a red fruit/berry and part of the nightshade Solanum lycopersicum.<br><br>
</p>
</details>
</td>
<tr>
<td class="pickles">
<details>
<summary class="Sum1">Pickles</summary>
<p class="Para1">
A pickle is a cucumber that has been pickled in vinegar or other solution and left to ferment.<br><br>
</p>
</details>
</td>
<tr>
<td class="lettuce">
<details>
<summary class="Sum1">Lettuce</summary>
<p class="Para1">
Lettuce is an annual plant of the daisy family Asteraceae that is easily cultivated.<br><br>
</p>
</details>
</td>
<tr>
<td class="cheese">
<details>
<summary class="Sum1">Cheese</summary>
<p class="Para1">
Cheese is a food derived from milk. There are hundreds of varieties produced all over the world.<br><br>
</p>
</details>
</td>
<tr>
<td class="hamburger">
<details>
<summary class="Sum1">Hamburger</summary>
<p class="Para1">
A Hamburger is a sandwich consisting of one or more cooked patties of ground meat inside a sliced bun.<br><br>
</p>
</details>
</td>
<tr>
<td class="bunbottom"></td>
<tr>
</table>
</div>

CSS:

<style>

.btn1th {

display:block;
-webkit-border-top-left-radius: 25px;
-moz-border-top-left-radius: 25px;
border-top-left-radius: 25px;
-webkit-border-top-right-radius: 25px;
-moz-border-top-right-radius: 25px;
border-top-right-radius: 25px;
font-family: Arial;
color: #ffffff;
background:#cc9966;
padding-top:10px;
padding-bottom:5px;
text-decoration:none;
text-align:center;
width:300px;
min-height:40px;
text-shadow: 1px 1px 3px #000000;
}

.tomatoes {
background:#ff3333;
display:block;
}

.pickles {
background:#669966;
display:block;
}

.lettuce {
background:#99ff99;
display:block;
}

.cheese {
background:#ffff00;
display:block;
}

.hamburger {
background:#663300;
display:block;
}

.bunbottom {
-webkit-border-bottom-left-radius: 25px;
-moz-border-bottom-left-radius: 25px;
border-bottom-left-radius: 25px;
-webkit-border-bottom-right-radius: 25px;
-moz-border-bottom-right-radius: 25px;
border-bottom-right-radius: 25px;
background:#cc9966;
height:30px;
display:block;
}

.Sum1 {
color:#ffffff;
padding:10px;
text-shadow: 1px 1px 3px #000000;
font-family: Arial;
padding:5px;
text-align:center;
}

details summary::-webkit-details-marker {display:none;}

.Sum1:hover {
background:#000000;
opacity:.5;
}

.Para1 {
color:#ffffff;
padding:5px;
width:280px;
text-shadow: 1px 1px 3px #000000;
}

</style>