Is there a way to remove the bullet points representing three dots in my list without hiding them? Hiding the bullet would create a gap in my bulleted list when expanding with a "show more" button, causing an uneven appearance. I am not proficient in Javascript, so I am unsure of how to address this issue.
<head>
<script>
function myFunction() {
var dots = document.getElementById("dots");
var btnText = document.getElementById("myBtn");
var more = document.querySelectorAll(".more");
if (dots.style.display === "none") {
more.forEach(el => el.classList.add("hidden"));
dots.style.display = "inline";
btnText.innerHTML = "Read more";
} else {
more.forEach(el => el.classList.remove("hidden"));
dots.style.display = "none";
btnText.innerHTML = "Read less";
}
}
</script>
<style>
#more {
display: none;
}
.columns {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
position: relative;
}
.hed {
font-size: 16px;
font-weight: 800;
list-style: none;
margin: 15px 0px 5px;
}
.hidden {
display: none;
}
table.map-list td{
width:50% !important;
vertical-align: top !important;
}
</style>
</head>
<body>
<table class="map-list" width="100%" border="0">
<tbody>
<tr>
<td>
<h4>Elementary</h4>
<ul>
<li>Maps: Primary: ELS</li>
<li>Maps: Primary: Readiness</li>
<li><span id="dots">...</span></li>
<li class="more hidden">U.S. History:8 Revolutionary War</li>
</ul>
</td>
<td>
<h4>Secondary</h4>
<ul>
<li>Maps: Intermediate: Physical</li>
<li>Maps: Intermediate: Political</li>
<li class="more hidden">Maps: Secondary: Population Thematic</li>
</ul>
</td>
</tr>
</tbody>
</table>
<button onclick="myFunction()" id="myBtn">Read more</button>
</body>