How can I hide/show text only for mobile users?

Question

I have text content on a page that leads to too much scrolling on mobile devices. I'd prefer to avoid having separate pages for mobile/desktop. Ideally, an editor would add a shortcode around certain paragraphs to allow the additional content to be hidden/shown on smaller screens.

So all the text below would show on desktop, but the second paragraph would be replaced by a hide/show link on mobile:

Lorem ipsum dolor sit amet, sit at voluptatum complectitur. Ei per diam case neglegentur. Sea in minim virtute nominati, id pro aperiam pericula, vim te ornatus inciderint.

[HiddenInitiallyforMobile]Vis nominati ullamcorper eu. Animal quaerendum pri at, in mea prodesset temporibus appellantur, dicat clita vel no.[/HiddenInitiallyforMobile]

I'm surprised I haven't been able to find a plugin solution or obvious way of doing this. Maybe I'm thinking this through wrongly.

Answer 1

I guess that you can set the class for the paragraph and set it's display to none only on mobile view.

Such as,

@media screen and (max-width:479px){

.nameofclasswhichtheparagraphhas {display:none;}

}

And add a button below it but set it's display to none for Laptop users. Such as,

@media screen and (max-width:768px){
.theclassofthebuton {display:none;}
}

and then use javascript for the button such as,

document.getElementById("buttonsID").onclick.style.display = "block";

Like this the button will show only on the mobile version and display the content when it is clicked. This is something I am trying out as well though just trying to help. Depending upon the site, I don't know if this can be implemented corrently. But still let me know if this was helpful.