0

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.

0

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.

  • I think this is the way I'll have to go. Maybe using a shortcode. I just find it strange that it's not easier to do, as I'd have thought it was something that a lot of websites could use. – Tenz May 29 '18 at 6:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.