Im having a problem. I am by no means a professional, yet I find myself having to do a simple bit of webdesign.The problem is, I cant seem to get a read more/read less button and function to work on two texts simultaneously. The texts are located in two flex items located in a flex container. I want them to be aligned in a row, with a single button beneath the container to open up the text in both items at the same time.
this is what I have so far, based on a code snipped where the button actually worked:
$(document).ready(function() { $("#toggle").click(function() { var elem = $("#toggle").text(); if (elem == "Read More") { //Stuff to do when btn is in the read more state $("#toggle").text("Read Less"); $("#text").slideDown(); } else { //Stuff to do when btn is in the read less state $("#toggle").text("Read More"); $("#text").slideUp(); } });});.flex-container-starttext { display: flex; margin: 0; flex-direction: row; flex-wrap: nowrap; font-size: 1.2em; align-items: stretch; background-color: #E6E6E6;}.flex-item-starttext { flex-grow: 1; flex-shrink: 1; flex-basis: auto; padding: 10px; background-color: #E6E6E6; color: black; max-width: 50%;}.starttext { color: black; font-size: 2.3em;}.starttext-a { color: black; font-weight: bold; text-decoration: none;}.starttext-a:hover { color: black; font-weight: bold; text-decoration: underline;}#text { display: none;}.btn-container { display: grid; height: 20%; width: 100%;}a:active { color: #ffd323;}button { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; cursor: pointer; border: none; padding: 8px; font-size: 24px; color: black; box-sizing: border-box;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><div class="flex-container-starttext"><div class="flex-item-starttext"><h2 class="starttext">lorem ipsum lorem ipsum</h2> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum<span id="text"> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum </span></div><div class="flex-item-starttext"><h2 class="starttext">lorem ipsum lorem ipsum</h2> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum<span id="text"> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</span></div></div><div class="btn-container"><button id="toggle">Read More</button> </div>From a style point of view, it all looks fine, but I cannot get the button to work like this. I know Ive probably majorly screwed up somewhere, but since im not familiar with javascript and either html or css I cant find the problem.
any help would be much appreciated, thank you in advance!