I am creating a content where it has a button called view all, which when clicking, shows all the rest of the content, but I have two problems:
- The first is that I do not know why I could not put a slow effect on the button when clicking.
- The second is that the content has automatic height, so when the screen resolution was changing, it would also automatically change the height used to hide the content.
I'll put the codes below, if anyone can help, thank you very much !!
jQuery(document).ready(function(){
jQuery('.ver-tudo').click(function(){
jQuery('.chamada').toggleClass('hidden');
});
});.chamada{ width:100%; height:343px; display:grid; grid-template-columns:1fr; grid-column-gap:0; grid-row-gap:44px; margin-top:24px; overflow:hidden; }
.chamada DIV{ max-width:100%; display:flex; flex-direction:column; }
.ver-tudo{ width:333px; height:46px; display:flex; justify-content:center; align-items:center; align-self:center; font:normal bold 16px/16px 'Roboto'; margin-top:50px; color:#000; border:1px solid #000; }
.hidden{ height:auto; overflow:visible; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="chamada">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet enim in enim dictum, eu laoreet augue ornare. Vestibulum ultrices nec massa sed fringilla. Quisque sit amet posuere dui. Morbi ac feugiat nunc. Duis luctus enim magna, non laoreet erat elementum in.</div>
<div>Sed dictum, enim non vestibulum fringilla, turpis risus tincidunt mauris, sit amet bibendum enim erat non libero. </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet enim in enim dictum, eu laoreet augue ornare. Vestibulum ultrices nec massa sed fringilla. Quisque sit amet posuere dui. Morbi ac feugiat nunc. Duis luctus enim magna, non laoreet erat elementum in.</div>
<div>Sed dictum, enim non vestibulum fringilla, turpis risus tincidunt mauris, sit amet bibendum enim erat non libero. </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet enim in enim dictum, eu laoreet augue ornare. Vestibulum ultrices nec massa sed fringilla. Quisque sit amet posuere dui. Morbi ac feugiat nunc. Duis luctus enim magna, non laoreet erat elementum in.</div>
<div>Sed dictum, enim non vestibulum fringilla, turpis risus tincidunt mauris, sit amet bibendum enim erat non libero. </div>
</div>
<a href="#" title="VER TUDO" class="ver-tudo">VER TUDO</a>