In order to achieve the actions you described, it is necessary to:
- Identify Items within the Document Object Model (DOM)
- Add an event listener for click events
- Adjust the visibility of elements on the page
If we were to tackle these tasks using pure JavaScript, here are some methods you could utilize:
document.querySelector()
This function bears resemblance to JQuery's selector methods, specifically in this context.
element.addEventListener('click', function)
This approach mirrors the functionality provided by JQuery's $('').click(function) method.
element.style
Using this enables direct adjustments to an element's inline styles, making it possible to set properties like display: none.
Combining these techniques:
// Use querySelector to find the .verMas element and attach a click event listener
document.querySelector('.verMas').addEventListener('click', e => {
// Prevent the default behavior of the event
e.preventDefault()
// Find the .wysiwyg element and adjust its height parameter to auto
document.querySelector('.wysiwyg').style.height = 'auto'
// Hide the clicked element
e.target.style.display = 'none'
// Locate and hide the .layerMiddle element
document.querySelector('.layerMiddle').style.display = 'none'
})
div {
padding: 10px;
}
.btn{
display: inline-block;
padding: 6px 12px;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
color: #333;
background-color: #fff;
border-color: #ccc;
}
<div class="wysiwyg">text......text...</div>
<div class="layerMiddle">[Layer Middle]</div>
<div class="btn btn-primary verMas">Ver más</div>