Untitled
unknown
plain_text
2 years ago
1.2 kB
5
Indexable
<html> <head> <style> .legend { width: 100%; /* make the legend take up the whole width of the screen */ overflow: auto; /* enable scrolling in both directions if needed */ } .legend-color-box { float: left; /* position the color boxes next to each other */ width: 20px; height: 20px; margin-right: 10px; } </style> </head> <body> <div id="legend"> <div class="legend-color-box" style="background-color: #ff0000;"></div> <div class="legend-value">Value 1</div> <div class="legend-color-box" style="background-color: #00ff00;"></div> <div class="legend-value">Value 2</div> <div class="legend-color-box" style="background-color: #0000ff;"></div> <div class="legend-value">Value 3</div> ... </div> <button onclick="toggleLegend()">Show/Hide Legend</button> <script> function toggleLegend() { var legend = document.getElementById('legend'); if (legend.style.display === 'none') { legend.style.display = 'block'; } else { legend.style.display = 'none'; } } </script> </body> </html>
Editor is loading...