Hi. How can I add a button to show / hide a piece of text (paragraph)? Thank you
write a small function in your user.js to add or remove a class on button click. I use something similar to reduce navigation bar size when scrolling:
function checkOffset() {
$(".navbar-fixed-top").toggleClass("top-nav-collapse", $(".navbar").offset().top > 50);
}
and I use that show/hide trick sometimes on the menu toggle:
//Hamburger menu toggle
$(".navbar-nav li a").click(function (event) {
var toggle = $(".navbar-collapse").hasClass("show");
if (toggle) {
$(".navbar-toggler").click();
}
});
$('.navbar-nav > li > a').on('click', function() {
$('.navbar-collapse').collapse('hide');
});
$('.navbar-nav>li>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
You could also use a Modal window by adjusting the CSS and removing the header area so that it's just the body and footer (using the CSS to adjust the footer area so it's smaller as well).
No need to write any .js. Bootstrap Studio already has a pre-made component that does exactly what you want. In the components library, go to Containers >> Collapse. This is a purpose-made button to show/hide a div. It already has the paragraph component in it.
Excellent! Thank you