See more button shifting text when clicked
Question
when i click read more the text on the right column shift. i need them to stay as they are. and i need the "show more" button at the bottom left of the list. is there any way we can fix this by just adjusting the code. I am new to javascript so i cant target the problem.
function myFunction() { var dots = document.getElementById("dots"); var moreText = document.getElementById("more"); var btnText = document.getElementById("myBtn"); if (dots.style.display === "none") { dots.style.display = "inline"; btnText.innerHTML = "Read more"; moreText.style.display = "none"; } else { dots.style.display = "none"; btnText.innerHTML = "Read less"; moreText.style.display = "inline"; } }
#more { display: none; }.columns { columns: 2; -webkit-columns: 2; -moz-columns: 2; float: left; position: relative; }.hed { font-size: 16px; font-weight: 800; list-style: none; margin: 15px 0px 5px; } <head> </head> <body> <div> <ul class="columns"> <li class="hed">Elementary</li> <li>Maps: Primary: ELS</li> <li>Maps: Primary: Readiness</li> <li>Maps: Primary: Outline World Map</li> <li>Maps: Intermediate: Physical</li> <li>Maps: Intermediate: Political</li> <li>Maps: Intermediate: Continents and Oceans Thematic</li> <li>Maps: Intermediate: Wealth of Countries Thematic</li> <li>Maps: Intermediate: Precipitation Thematic</li> <li>Maps: Intermediate: Temperature Thematic</li> <li>Maps: Intermediate: Time Zones Thematic</li> <li>Maps: Intermediate: Land Use Thematic</li> <li>Maps: Intermediate: Population Thematic</li> <li>Maps: Intermediate: Outline World Map</li> <li>US History: 1 Native Americans</li> <li>US History: 2 Spanish Explorers</li> <li>US History: 3 Explorers</li> <li>US History: 4 The Great Exchange</li> <li>US History: 5 European Settlements</li> <li>US History: 6 Thirteen British Colonies</li> <li>US History: 7 Slavery in the Americas</li> <li>US History: 8 Revolutionary War</li> <li>State Map</li> <li class="hed">Secondary</li> <li>Maps: Intermediate: Physical</li> <li>Maps: Intermediate: Political</li> <li>Maps: Intermediate: Continents and Oceans Thematic</li> <li>Maps: Intermediate: Wealth of Countries Thematic</li> <li>Maps: Intermediate: Precipitation Thematic</li><span id="dots">... </span> <span id="more"> <li>Maps: Intermediate: Temperature Thematic</li> <li>Maps: Intermediate: Time Zones Thematic</li> <li>State Map</li> </span> </ul> <button onclick="myFunction()" id="myBtn">Read more</button> </div> </body>
1 answers
solution1
0 2019-09-20 18:54:45
The reason your button is not below the lists like you want is because your unordered list columns has float: left . Perhaps column-gap can achieve the look you want.
The reason the list items move around is because your columns are self-balancing. The more items you add at once the greater the shift, and you may notice that if only one item were to replace the ellipsis the columns would stay the same. Maybe you could try column-fill: auto ? https://www.w3schools.com/cssref/css3_pr_column-fill.asp
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.