Using Interactions to toggle href attribute

How To
1

I’m having trouble understanding the logic of the new interactions feature, and the doc is a little bit scarce for the moment.

  • I have two sections set to 100vh. Upper one is has ID “brxe-fawjlw” and lower one has ID “brxe-ljmpgw”.
  • I have a “position:fixed” element (50px square div with a “info” text element and an icon with an arrow pointing down) in the bottom right corner.
  • This div has a hash-link to the second section “#brxe-ljmpgw” set normally using the Bricks “Content” tab.

Now, I’m trying to use interactions so that when the link (div element) is clicked, the hash-link is changed to the ID of the upper section. This way, the link can redirect user to the top part of page. If clicked again (to go up), the hash-link reverts to it’s original state and allows user to go back down again (if he decided to click it again).

It’s a super easy principle, but the logic of Interactions I can’t figure out : how to play with the attribute “href” to make it switch every time user clicks the div element ?

I’ve tried pretty much every combination I can think of (I’m not going to list them here or this will be longest post of the year), and somehow the loop does not want to work as intended. Either there is no more “href” attribute at some point, or it’s just the wrong one…

  • Do I need to “set” or “toggle” attribute, and then do I need to “Remove attribute” after setting it ? And then “set” or “toggle” again the other hash-link ?
  • Am I doing something wrong by using the normal link setting to begin with ? Should I use interactions to set the first hash-link on page-load ?
  • Should I store the new “href” value (hash-link) in another data-attribute, or is it correct to be using only the “href” attribute ?

@timmse ?

1 Like
2

Unfortunately this is not possible without custom JS coding. Here is the official answer from Bricks support :

Based on your forum thread, you wish that click on the button that will toggle href value within “link A” and “link B”.
However, this is not possible to achieve in Bricks interactions Set or Toggle actions.

Set attribute in Bricks is directly set the attribute to your desired value.

It’s removes the attribute or set the attribute.

Not suitable to use on attribute with values.

This is the reference: Element: toggleAttribute() method - Web APIs | MDN

Hence, you have to write custom JavaScript to toggle the value.

3

Very late to this party. But couldn’t you just have 2 buttons - and on-click toggle a hidden state for both - so it looked like the same button, but was a different one with new href?

1 Like