I am in need of assistance with my website, specifically regarding the functionality to expand and collapse div tags when a user clicks on "read more" or "close". As I am not familiar with jQuery, I would appreciate any JavaScript or CSS code that can achieve this. Despite researching the topic, I have not found a solution that fits my requirements perfectly. Here is an example of two of my divs where the expanded content overlaps the existing content:
html:
<div class="servicesBox">
<p><b><u>Personal Breakthrough Sessions</u></b>
<br>
<i>“The secret of change is to focus all of your Energy, not on fighting the old, but on building the new.”</i>
<b>Socrates
...
//truncated for brevity
...
}
css:
.demo {
background: #969696;
width: 690px;
height:300px;
color: white;
font-size: 50px;
position:absolute;
}
#debug
{
position:absolute;
top:350px;
}
.commenthidden {display:none}
.commentshown {display:inline}