I'm trying to make an expanding box by clicking on <a>
but I can't understand how to use the this
this is how far I've gotten so far
function change()
{
if(this.parentElement.style.height!="auto")
{
this.parentElement.style.height="auto";
this.innerText="show less";
}
else
{
this.parentElement.style.height="100px";
this.innerText="show lmore";
}
}
.container {
height: 100px;
position: relative;
display: grid;
width: 100%;
grid-template-columns: auto;
grid-template-rows: 1fr 1rem;
overflow: hidden;
background-color: red;
}
.content {
width: 100%;
overflow: hidden;
}
<div class="container">
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a class="read_more" href="javascript:void(0);" onclick="change()" style="background-color:yellow; width:50%">show</a>
</div>
While you're at it can you remind me why clicking anywhere in the green box is causing the link to be pressed?
(I can't seem to remember)