Double interaction

Wish List
1

Hi,
I would like to add button interaction that will toggle visibility of the particular block and at the same time scroll to this block.
What do you thing, or is there any walk-around?

2

I did this manually.
The HTML code must be modified after export. Add the following code:

onclick="scrollToTarget('#your_id')"
original:
<a href="#" class="btn btn-lg btn-sq btn-d gomb2 btn-block" data-toggle-visibility="g13,g14,g15">Show Less</a>

after modification:
<a href="#" class="btn btn-lg btn-sq btn-d gomb2 btn-block" onclick="scrollToTarget('#g12')" data-toggle-visibility="g13,g14,g15">Show Less</a>

It’s working here (Show More / Show Less buttons):

3

There are a couple ways to do this without editing after export. You can also do this using a function in the page settings - add code section. then in the elements interaction chose Navigate to URL and add the function call:

javascript:yourFuntion();

2 Likes
4

That sounds interesting. Unfortunately, I can’t write code.
That’s why I use Blocs.
I’m a graphic designer, not a programmer.
Could you explain this? Or it is so complicated?

1 Like
5

Yep, I have difficulties with that too :no_mouth:

6

cincy, I couldn’t figure out how to make that code work on the page. Should I use code mentioned by Ben?

Thanx

7

Hi!
Adding the “scrollToTarget” after export worked wonderfully.

Original:

<a href="#" class="btn btn-d btn-lg morebutton" data-toggle-class-target="target1,target2,target3" data-toggle-class="object-hidden">Show Less</a>

After Modification

<a href="#" class="btn btn-d btn-lg morebutton" data-toggle-class-target="target1,target2,target3," data-toggle-class="object-hidden" data-scroll-speed="1" onclick="scrollToTarget('#scrollTarget',this)">Show Less</a>

However, I would like to have the effect saved within blocks rather than having to manually modify every time I export. Calling a javascript function would fit my needs perfectly, but I don’t know how to connect the dots and make it work.

In the code editor I inserted:

<script>
	function doubleInteraction {
		document.write("data-toggle-class-target=\"target1,target2,target3\"");
		document.write("data-toggle-class=\"object-hidden\"");
		document.write("data-scroll-speed=\"1\"");
		document.write("onclick=\"scrollToTarget('scrollTarget',this)\"");
	}
</script>

And when a button is clicked I “navigate” to the url:

/script/doubleInteraction

What am I doing wrong?
Thanks in advance!

8

@Dragonfly

You could just use the custom attribute field on the right panel.

I use this towards the end of my tutorial for adding ScollSpy to Blocs for adding a scroll to.

That won’t run your code.

9

It works great! This method is even more convenient than calling a javascript function would have been. Thank you!