Scroll to target and open toggle visibility

[tom2]

Hi,
anyone have a solution for this ? At the top of the page I want to have a button ( for example booking ) and when I click the page scrolls to the end of the page ( it is a single page ) but, I want to use a contact for with a lot of options, and I want to use the toggle visibility option. But when I click the button, the toggle visibility opens, but the client don’t see that …because the contact form is on the bottom of the page and the button at the top of the page…

Is there a way that the page also scroll down by press the button?
thanks a lot
tom

[Pealco]

Hello @tom2
Check if is this that you want, I made this page for you with two options:

1. One button to Scroll and Show Only.

2. Another Button to Scroll and Toggle…

And I add a close button to the form, so if you choose the Show only, you can close the form if you need.

https://blocs.webtekpc.pt/examples/tom2/

Hope you like it…

[tom2]

Hi !!
Wow ! That’s it. But I don’t see a difference between this two options ( on a iPad ) …but when clicking the page scroll down and the close button is also perfect …how you do this ??
Thanks a lot

[Pealco]

@tom2

If you press the “scroll and show” it will scroll and open the form bloc. Without close the form, scroll up again and press the same button, you will go to the bottom but the form remain opened.

If you press the “scroll and toggle” it will scroll and open the form bloc. Without closing the form scroll up again and press again “scroll and toggle”, it will scroll but automatically toggle/close the form, if you go up again and press it again, it will scroll and open again.

Try it, I’m on iPad too and everything is working.

[tom2]

@Pealco
Ok, checked …works fine also on a iPad …
I think I need the „scroll and show only“ option …
Thanks tom

[tom2]

Hi @Pealco
Can you please tell me how you do this ? Or send me a Projekt file ?
Thanks Tom

[Pealco]

Yes, as soon as I get my laptop, I’ll send you…

[Pealco]

Hello @tom2
There you go:

1. create a bloc with the form and give it an ID: “hideshow”, then click the visible icon to hide it.

2. create a html code, and add the following one to add the button with the code to scroll and open the bloc.

<input type="button" id="hideshow" value="Scroll &amp; Show Only" class="bloc-button btn btn-d btn-lg btn-block">
<script>
jQuery(document).ready(function(){
        jQuery('#hideshow').on('click', function(event) {        
             jQuery('#formbloc').show('show');
        });
        $("#hideshow").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#formbloc").offset().top
    }, 2000);
	});
});
</script> 

Hope it will help…

[tom2]

Hi @Pealco
thanks for your help …
I don’t get it to work. think I do something wrong …

1. I have creat a form. Than give an ID ( where I give the ID - the bloc or the form ? ) I tried both
2. I have create a Html Brick and put the code inside ? right ?
3. Is there a way to style the button ? I want to use the button like the blocs option for button “wire” ?
   And the button should have the size of the text … not more. Sorry for my bad English
   thanks and sorry
   tom

[Pealco]

Sorry my mistake wit instructions the ID is not “hideshow” the “hideshow” is the id of the button, the correct ID for the form is: “formbloc” → sorry my mistake.

And the ID is to the bloc.

About the button they are created with Bootstrap4 conditions, so for this buttons the styles are:

class=“btn btn-outline-primary”
class=“btn btn-outline-secondary”
class=“btn btn-outline-success”
class=“btn btn-outline-danger”
class=“btn btn-outline-warning”
class=“btn btn-outline-info”
class=“btn btn-outline-light”
class=“btn btn-outline-dark”

Then the size:

For Large Buttons add: btn-lg

For Small Buttons add: btn-sm

Check more variables Here.

If you like the buttons you create in the rest of your project, just export your site, edit the html and copy the class that was created in the rest of the buttons, and copy to this one in your project (inside the html code)

[tom2]

Hi @Pealco
your great…works ! In Your example there is a close symbol. In my example not, or I dont see it because my background of the form is really dark … and the grey symbol is not to see
Is it possible that I use the same code twice on the page ? Because the second button dont work ( middle of the page ) When I delete the first button the second works
again, thanks a lot for your help
tom

[Pealco]

To create a second button you have to have a different ID, so the code for a second button should be:

 <input type="button" id="hideshow2" value="Scroll &amp; Show Only" class="bloc-button btn btn-d btn-lg btn-block">
<script>
jQuery(document).ready(function(){
        jQuery('#hideshow2').on('click', function(event) {        
             jQuery('#formbloc').show('show');
        });
        $("#hideshow2").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#formbloc").offset().top
    }, 2000);
	});
});
</script> 

About the close button on the form, is a icon, then change the icon to the symbol you want, on the right side the interaction pass it to toggle visibility and put the ID of the form bloc.
Then you have in the same place a color change.

[tom2]

@Pealco
works perfect!!! Thank you so much!
tom

[tom2]

Hi,
did anyone know why this code don’t work anymore? @Pealco help me a lot with this problem a few weeks ago. I open the project a few days ago, and after the update it don’t work … I read about a few problems with some code and brics … anyone has a solution ? I am not good with code…
thanks tom

[Pealco]

It’s true @tom2 is not working anymore, @Norm can you check it please, with this update some of the codes are not working… there you have the bloc to test…
Button to Scroll & Show.bloc (741.4 KB)

[Pealco]

Hello @tom2, @Norm explain me what was changed now.
Go to your buttons and in both, change line 3 of code from this:

jQuery(document).ready(function(){

to this:

document.addEventListener("DOMContentLoaded", function() {

Hope it works, so to let you all know, I’m finishing my snippets code site and all this is reflected…

[tom2]

Hi @Pealco
Thanks for your help!!
tom