I would like to add a show/hide interaction on my website, but only in the mobile view.
Unfortunately I have been unsuccessful so far, as the very first step, hiding the text (adding ‘display none’ on the div block containing the text + image) doesn’t even work. I am able to hide the paragraph on load, but I need the image hidden as well, which is why I have been attempting to do it on the Div block.
Anyone have a link to a recent video? The only one I could find was outdated and didn’t really work for me even back when it was recent, because the interaction would work on the first click (show), but then wouldn’t function as it was supposed to on the second (hide): https://interactions.webflow.com/click-to-show-content-video
I want the titles to become a list, essentially. I would like the image and the paragraph to be hidden on load, and to show when the user clicks on the title.
All of them at once? What is the trigger you want to use? Ok so just in mobile. Problem is Webflow doesn’t allow interactions to just run on one view. For some reason interactions aren’t responding right now. What I’m trying to do is create a new click trigger for instance SMS & Email Reminders that is only visible on mobile. Then use that to reveal the div on mobile.
I’m not really sure how to explain it, but I will try!
I would like each title to become a clickable list item. For example, say I have a list of 6 items:
Online appointment booking SMS & Email Reminders 3rd point 4th point So on…
I would like them to be listed as they are above in mobile mode… but if someone would like to read more about a certain feature, say, Online appointment booking, they would click on it, and then the supporting text would appear.
Online appointment booking
Your patients can book online on your Bleen® landing page, or you can add a ‘Book now’ button to your existing website. This way, you have the patient’s health insurance number, email, and reason for consulting before they arrive.
I have to run, but I have started on a solution. the trick is you need to create a trigger just for mobile. A text Div with (SMS & Email Reminders) basically a duplicate of all your headings. Give them all the same class.
Wrap the text and image in a div. Then use the style panel to hide the div. You can’t hide it using interactions because then it will affect all of the views. Then you create a click trigger to make the div block appear/dissappear. Make sure the click trigger is nested in the features wrapper with the div. And set the interaction to limit to siblings. From this you can make a fancier interaction but that will do what you want. Simple appear disspear on click. I’ll try to come up with some sort of video when I get back unless someone else has done it already done it.
It is a work around because otherwise the interaction effects all the views.
First of all, thanks so much for the video. That was really nice of you.
I am having the same issue that I originally had, though. When I put the text and image in the div block, and then change the div block to display none, it doesn’t do ANYTHING.
I don’t get it!
I can hide the features wrapper or the text, but not the div block! I followed your video step-by-step until I got to that part, and then it just doesn’t work for some reason.
You’ve duplicated the rich text block and the features image,
That was just one thing. Main thing though was you had in the settings panel the div block and features image set to mobile only. If you noticed it didn’t appear on desktop. Only set display none in the styles panel.
I didn’t realize I wasn’t supposed to duplicate them, as I don’t know how to place a class on the heading when it’s inside the Rich Text Block. How were you able to isolate the heading without duplicating it and then hiding it on desktop?
I didn’t place it in the rich text block. I placed it above it. In the Features wrapper. Rich text isn’t helpful for isolating anything. You can have the same effect by just styling a paragraph block and have two separate headings. I just went with what you were already doing to make it work. Rich text is great if you want to combine bullet points and images and text. But, you do not even have your image in the rich text block.
