I’m a newbie when it comes to almost everything when it comes to building websites. I would be very thankful if someone could point me in the right direction toward a solution to my problem.
I’ve used snippets of jQuery and css in order to create a collapsible section on my site, this is the jQuery:
<!-- javascript för collapsible sections -->
<script type="text/javascript">
jQuery(document).ready(function() {
// Hide the div
jQuery('#reveal').hide();
jQuery('.rv_button').click(function(e){
e.preventDefault();jQuery("#reveal").slideToggle();
jQuery('.rv_button').toggleClass('opened closed');
jQuery('.opened').html('Stäng');
jQuery('.closed').html('Ladda fler');
});
});
</script>
This is the css:
/* css för collapsible section*/
.rv_button.closed:after {content:"33";}
.rv_button.opened:after{content:"32";}
The section is closed when you first enter the site. When you press a button, you reveal more content.
On laptop it works fine. On mobile and tablet however, it leaves a white space just below the main menu after you’ve activated the collapsed section. Like this:
This is the website: https://www.principcasino.se