I need to show an arrow button on each row on a collapsed menu as the given picture
I have written the below HTML code and I am not sure how to put the down arrow at the end of each row like the picture
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
.collapsible {
background-color: white;
color: black;
cursor: pointer;
padding: 18px;
width: 100%;
border-bottom: 1px solid #3b3b3b;
text-align: center;
outline: none;
font-size: 15px;
font-family: 'Roboto', sans-serif;
float: left;
}
.active, .collapsible:hover {
background-color: #555;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
font-family: 'Roboto', sans-serif;
text-align: center;
}
img {
height:30px;
width:auto;
}
h2{
text-align: center;
font-family: 'Roboto', sans-serif;
}
p{
text-align: center;
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<h2>BUY NOW PAY LATER</h2>
<p>MAKE YOUR SHOPPING EXPEREINCE EASIER WITH OUR BUY NOW & PAY LATER OPTIONS</p>
<button type="button" class="collapsible">USA</button>
<div class="content">
<img src="https://cdn.shopify.com/s/files/1/1084/7742/files/afterpay_b3c68881-b0e3-4aa1-bfd9-9432a6e7f84b.png?v=1678664225"> <img src="https://cdn.shopify.com/s/files/1/1084/7742/files/sez_6b34600a-46d8-4dce-afbf-4ba445aadca4.jpg?v=1596434632">
<p>IF YOU ARE SHIPING FROM THE USA WE OFFER SEZZLE AND AFTERPAY</p><br>
<p>FOR MORE INFORMATION ON SEZZLE. <a href="url">CLICK HERE</a></p>
<p>FOR MORE INFORMATION ON AFTERPAY. <a href="url">CLICK HERE</a></p>
</div>
<button type="button" class="collapsible">AUSTRALIA</button>
<div class="content">
<img src="https://cdn.shopify.com/s/files/1/1084/7742/files/afterpay_b3c68881-b0e3-4aa1-bfd9-9432a6e7f84b.png?v=1678664225"> <img src="https://cdn.shopify.com/s/files/1/1084/7742/files/sez_6b34600a-46d8-4dce-afbf-4ba445aadca4.jpg?v=1596434632">
<p>IF YOU ARE SHIPING FROM THE USA WE OFFER SEZZLE AND AFTERPAY</p><br>
<p>FOR MORE INFORMATION ON SEZZLE. <a href="url">CLICK HERE</a></p>
<p>FOR MORE INFORMATION ON AFTERPAY. <a href="url">CLICK HERE</a></p>
</div>
<button type="button" class="collapsible">UNITED KINGDOM</button>
<div class="content">
<img src="https://cdn.shopify.com/s/files/1/1084/7742/files/afterpay_b3c68881-b0e3-4aa1-bfd9-9432a6e7f84b.png?v=1678664225"> <img src="https://cdn.shopify.com/s/files/1/1084/7742/files/sez_6b34600a-46d8-4dce-afbf-4ba445aadca4.jpg?v=1596434632">
<p>IF YOU ARE SHIPING FROM THE USA WE OFFER SEZZLE AND AFTERPAY</p><br>
<p>FOR MORE INFORMATION ON SEZZLE. <a href="url">CLICK HERE</a></p>
<p>FOR MORE INFORMATION ON AFTERPAY. <a href="url">CLICK HERE</a></p>
</div>
<button type="button" class="collapsible">NEW ZEALAND</button>
<div class="content">
<img src="https://cdn.shopify.com/s/files/1/1084/7742/files/afterpay_b3c68881-b0e3-4aa1-bfd9-9432a6e7f84b.png?v=1678664225"> <img src="https://cdn.shopify.com/s/files/1/1084/7742/files/sez_6b34600a-46d8-4dce-afbf-4ba445aadca4.jpg?v=1596434632">
<p>IF YOU ARE SHIPING FROM THE USA WE OFFER SEZZLE AND AFTERPAY</p><br>
<p>FOR MORE INFORMATION ON SEZZLE. <a href="url">CLICK HERE</a></p>
<p>FOR MORE INFORMATION ON AFTERPAY. <a href="url">CLICK HERE</a></p>
</div>
<button type="button" class="collapsible">CANADA</button>
<div class="content">
<img src="https://cdn.shopify.com/s/files/1/1084/7742/files/afterpay_b3c68881-b0e3-4aa1-bfd9-9432a6e7f84b.png?v=1678664225"> <img src="https://cdn.shopify.com/s/files/1/1084/7742/files/sez_6b34600a-46d8-4dce-afbf-4ba445aadca4.jpg?v=1596434632">
<p>IF YOU ARE SHIPING FROM THE USA WE OFFER SEZZLE AND AFTERPAY</p><br>
<p>FOR MORE INFORMATION ON SEZZLE. <a href="url">CLICK HERE</a></p>
<p>FOR MORE INFORMATION ON AFTERPAY. <a href="url">CLICK HERE</a></p>
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
</body>
</html>If anyone could tell me how to put a downward arrow like that in HTML it would be greately appreciated.
2
Answers
Using flexbox you could push the arrow to
margin-left: autoNote to be more semantic the buttons should not contain a div however the javascript broke with the below code.
I have used inline styles but you should use classes for separation of concerns between HTML and CSS. You would also need to put your wrapping styles such as the border in the parent div.
Here’s the trick; I have added caret with pseudo element.