How can I display the collapse button and text only on mobile devices while showing the uncollapsed content on desktop?
I am considering using an example to display part of the text initially, with the rest revealed upon clicking a button. This method is suitable for mobile devices.
<p>
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</p>
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
However, I'm unsure about how to make all the text visible on desktop while hiding the buttons.
<p class="mobile-show-more">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</p>
To hide the buttons, you can simply add:
.mobile-show-more {
display: none;
}
I was thinking of using a media query like:
@media only screen and (max-width: 600px) {But I'm not sure what the class should look like in this case. Using the '.mobile-show-more' class for desktop text would lead to duplicate content.