Streaming live at 10am (PST)

Multiple show/hide buttons for multiple different div's


#1

Hey Guys,

Please have a look at my website. For every room listed, there is a price ('cennik') button that shows/hides the prices (yellowish field).
Imagine I have 50 rooms listed. I do not want to define 50 interections! I want one and the same interaction for every room, but each button to show/hide only the price of the room next to the button. 'Limit to nested/siblings' option does not work as the prices are neither nested nor siblings to the 'cennik' button.

Here is my public share link: https://preview.webflow.com/preview/saleszkoleniowewarszawa-a330be393fb84b4?preview=9a797ac8d8bb7e66da1d34a602772794
(how to access public share link)


#2

Remove interactions for those buttons.

Put this in your Page Settings > Custom Code (body).

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  $(".cennik_button").click(function() {
    $(this).parents(".Fiszka").find(".row_cena_sal").toggle();
    return false;
  });
});
</script>

#3

To build a webflow only working and reusable interaction, you need to think you structure upfront.

You're going to limit the effect of you interaction to either child or sibling elements (elements on the same level or element in a level below).

So for example, you could have this repeating structure:

<div>
    <button></button>
    <div class="hiddendiv"></div>
</div>

You'll place your interaction on the button, target a "different element" (hiddendiv) and limit the effect to siblings (because hiddendiv is at the same level than the button, so it's a sibling, a brother)

That way the interaction will only work on the sibling "hiddendiv" div. You can have the same structure — with the same "hiddendiv" class— for all your rows and affect the same interaction to all the buttons.


#4

Thanks man! It does not seem to work though (or I did something wrong)


#5

Thank You Vincent but I hoped for a solution that would not mean changing the structure.


#6

I havent looked at your structure, let me check.

edit: yep, you'd have to change the structure to place the hidden elment at least at the same level than the button


#7

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