Streaming live at 10am (PST)

Anyone have a RECENT link to show/hide interaction video?


#1

Hello,

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

Any help would be appreciated!

Here is my public share link: LINK


#2

are you just wanting to hide the object in mobile view?


#3

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.

Thank you :slight_smile:


#4

what is your share link? and do you want them to pop up at the same time?


#5

http://https//preview.webflow.com/preview/bleen-phase-3?preview=59aced4ed050c909b095a397242673ca

Please see the page called ‘features’

You’ll see in desktop mode there are 2 columns of features with text + images
I would like those features to be listed with show/hide options.


#6

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.


#7

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.


SMS & Email Reminders
3rd point
4th point
So on…

Hope that makes sense!


#8

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.


#9

Great, thank you so much! I’ll wait for your video as it will be much easier.


#11

#12

Hi,

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.

Any idea why?


#13

You’ve duplicated the rich text block and the features image, 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.

Probably easier with another video.


#14

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?


#15

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.


#16

here you go with the video,


#17

I was able to do it by removing the rich text and making a paragraph + heading instead.

Thanks so much for your help!


#18

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.