Toggle visibility issues

[Ian]

This is a strange one, to me at least!

(I’m persisting with Blocs 2, as the ‘smooth expansion’ feature of toggled blocs is not working yet in Blocs 3.)

Put simply, a button to toggle visibility reveals blocs in PC mode, but hides them in mobile mode.

Put more fully, if you take a look using a laptop or PC at any of of the OPEN/CLOSE button effects here www.poulson.info/test/ you’ll see that the new information is revealed…

But on a tablet or mobile, on a test project, the extra information is shown until the OPEN/CLOSE button is clicked, when it disappears.

I simply cannot get blocs to default as hidden in mobile view.

My brain is hurting now.

Any ideas welcome!

[bourne]

Not at my computer but I think it’s in the custom class setting as display. Set it to none for mobile.

[Ian]

You won’t see that the mobile effect is the opposite via the link, it’s only on a test project, the link was to show how it should be (closed) until the button is clicked.

The mobile default is ‘open’ until clicked, when it closes.

[Ian]

Okay, I’ve published the test here www.poulson.info/test/

On a mobile, scroll near to the bottom of the page and click OPEN/CLOSE on any of Indialantic, Aix or Brookfield, and you’ll see the blocs disappear. Their settings are identical to the PC version, where they are closed until clicked.

The actions are inverted and I don’t know why.

[Ian]

@Norm - is there a solution to this please Norm?

[rusmir]

So far i can see your block structure is false. You are calling toggle visibility for several id.
On one place under the first block for open/close. You have another block group with six different columns. And your call is data-toggle-visibility=“flo1,flo2,flo3,flo4,flo5,flo6”

Why?

You need to have one block with big img and button.
Second block under and give him an id whatever you call it.

On your btn above you need to give him toggle visibility and just add the id name. So he knows what to get visible.

On the content bloc give a custom class display none. So it will be not visible but after clicking on btn it will be.

Check how we did that on our page. Showing see more information for each of our team members.

https://digi.me/team

Hopefully this was helpful

[Ian]

Thanks Rusmir,

I really like what you did, and in fact was hoping to figure it out myself how to do exactly that.

But I’m still not sure why a larger breakpoint defaults the toggle as closed, but a smaller breakpoint defaults as open.

I’ve got a support ticket open with @Norm, but no solution as yet.

One question Rusmir - did you make your site with Blocs 2 or Blocs 3?

Thanks again,

Ian

Just as a reminder, if you go to Ian Poulson | Completed House-sittings and look at a wide browser window it works fine (toggles are closed), but when you reduce the browser with to its narrowest toggles are open (scroll down until you see the correct button…

[rusmir]

Hi @Ian this page is made with Blocs2 and the new will be published soon on Blocs 3. Same way as we did in previous version. And it works fine.

I think you have still problem with scroll to target nad ids. Because everything what is set on lg breakpoint needs to be on xs too. If you want you can send me blocs file so i can take a look.

Basically you want to have on all breakpoint that part closed and expanded on toggle-visible?

Can you try to give and id to this block group and call it on btn?

[Ian]

Thanks @Rusmir, I tried Blocs 3 but the smooth, sliding transition when toggling in Blocs 2 has gone. @Norm says it’s not possible as the Bootstrap doesn’t allow it (I paraphrase). You may find it spoils the look of your site.

I’m sorry I don’t understand how to do what you suggest, as the only IDs I can apply are the ones I have used… I attach screenshots which may help to explain what I did.

Thanks again @rusmir, I really appreciate your time!!!

[rusmir]

I know that you have used a one bloc above with btn for toggle. And below a set of blocs x3
You don’t need to do that. Since you can just use one bloc with 3 columns.

I will send you a sample bloc file with some code for toggle and smooth transition.
Please don’t forget to change display-none css class to default. Just to see how it works. It wokrs on all breakpoints well

[Ian]

Thanks once again!

I think (another) new start is required… the way you set up your website is how I wanted mine, but I didn’t think it was possible, so inspired by you I’ve had another try…

I’ve made this: Dropbox - File Deleted

But - I cannot work out how to have (for example) A header show A content beneath it at all breakpoints. You’ll see what I mean!

Thanks.

[rusmir]

@Ian You can not do in that way. Since when you open a second one it will shift it to a first in a row. Since the first one is empty. float that’s the problem. I will send you a new one with two options. we are using the first one on our site.

[Ian]

Hey man, heartfelt thanks for your advice, it’s enabled me to do a single version of my site really quickly, where before I had to do a mobile version as well, as the toggle didn’t work the same way as the desktop version.

Really, cannot thank you enough.

I’ll send a link to my new and improved (and simpler) website tomorrow.

Best, Ian.

[rusmir]

Am really glad that you followed my advice and that you managed to fix your bugs. My self has read most things on forum here and watched @Eldar videos. My job in the company is to work 24/7 with our company websites. And all websites are build with blocs.

Since Bloc3 is out and improved constantly spare me a really time on them. Working as a designer has multiple problems. You design, give to developers. Answering lot of questions. Your design is not transferred right. But we started with blocs 2 and have build our entire web presence with blocs alone without developers. You just need to know html and css and little bit of js to fix your problems.

I love what @Norm did and his team. And the way where blocs is heading. There is a lot of soft out there like Webflow. But i think blocs is heading to be a pro tool

And sure the blocs community is really good. Everybody will help you.

The only thing what i would love the see is export versions. If you change something and re-export your project i would love to see only changed files. So you know what you need to redeploy to production.

Something like:

• folder (project name_date)
• changed files inside

this is only helpful if you are deploying through jenkins

[Ian]

Yo @rusmir, me again!

I’ve got my website where I want it now, thanks to you! www.poulson.info

But I’m still on Blocs 2 as Blocs 3 doesn’t allow for ‘smooth toggling’.

So, do you know of a way to achieve ‘smooth toggling’ in Blocs 3 (I know you said you were moving your own site to Blocs 3)?

Thanks.

[rusmir]

only this

<.a href="#" onclick=“setTimeout(function() { scrollToTarget(’#your id’) }, 0)” data-toggle-visibility=“your id” target="_blank">
img or copy
</a.>

remove dots on A tag. does not allow me to include the call

and call it from widget

[Ian]

Thanks @rusmir, I’ve been playing with the code but without success… I don’t really understand coding at all!

What should it look like, if the target of the toggle is newrow1 ?

And, where it says img or copy can I add an image of a button?

Thanks once again!

[rusmir]

You still have it wrong. Don’t use hidden object to hide something. Use display none.
I have send you last time the file how it should be done
Toggle for your case will goes on bloc not the rows inside

the structure is like
bloc
row
row

so you need to have id on bloc that contains your content.

so basically you need to rework your design. it’s not too much work. take the id names from rows. call toggle on block-4 and give him a css class display:none (create one)

or just use it your style

take a look on the ss

for buton action use a widget. to call teh action.
remove id names from rows
give a bloc a name that is called from toggle. in my case i called first

this is the call that will scroll and open

<.a href="#" onclick=“setTimeout(function() { scrollToTarget(’#first’) }, 0)” data-toggle-visibility=“first” target="_blank">
Open/Close
</a.>

delete the dots when using this call

[Ian]

Thanks - I’ve read through your instructions several times and I think I did everything you suggested, but it’s not working. I’ve uploaded a new version of the website here.

The first picture has your code attached to it (pale blue text).

Can you see what’s wrong? Thanks!!!

[Ian]

Got it sorted in Blocs 3.

The smooth transition when toggling (as in Blocs 2) works in Blocs 3 on all break points as long as you toggle containers. Sometimes works with columns also, but not always, for some strange reason.

And the good news @rusmir is that no widgets are required (I couldn’t understand your widget advice, sorry)!