Preview:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Data Attribute Example</title>
    <style>
        .item { cursor: pointer; margin: 10px 0; }
    </style>
</head>
<body>
    <h2>Product List</h2>
    <div class="item" data-description="A fresh apple from the orchard" onclick="showDetails(this)">Apple</div>
    <div class="item" data-description="A ripe, sweet banana" onclick="showDetails(this)">Banana</div>
    <div class="item" data-description="A juicy bunch of grapes" onclick="showDetails(this)">Grapes</div>

    <h3>Details:</h3>
    <p id="details"></p>

    <script>
        function showDetails(element) {
            const description = element.getAttribute("data-description");
            document.getElementById("details").textContent = description;
        }
    </script>
</body>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter