Streaming live at 10am (PST)

Custom Filter with radio buttons


#1

Hi, I am creating a site where my client want me to make him a custom filter. There would be 4 sections each bears radio buttons coming from a collection. Below these sections there is another collection dynamic list, and the item of this list shall only show regarding the selection of radio buttons above. This collection has reference field of all above radio buttons collection.

For instance here is the link Click here to see the link


#2

Hi, @Mueedullah_Khan

Could be more specific with your question, please? What kind of help do you need?

Regards,
Anna


#3

Check this link http://lacoliquid-sample.webflow.io/home-2
You can see the radio buttons they comes from 4 different collections. When you click the radio button from each of the 4 sections the below section where you can the bold words i.e "Personal Care - Powder - Bag - Plastic".

P.S. this last section's content also comes from a collection and bearing a reference of each section of radio buttons.


#4

All it looks like to me is a couple of radio buttons in a wrapper being shown through a click trigger interaction.


#5

I am trying to make the question more simple and concise.

Now here is q div (having a class "Div1") it is bearing 3 radio button in each radio buttons group. See an example here
https://plnkr.co/edit/zSAaJzsBGH7GCnVPrIyA?p=preview

You can see in output span there are some bold text, I want to keep it hide initially and each of them should only show up according to selection of radio button. i.e. if you have selected "Liquid" radio button then only that link should show which is bearing the word "Liquid".

My logic is if we copy each line's text to the same line's div's class and then compare value or label of radio button with that div class whether they are equal and if thy are equal then show the line else keep it hide.

I have got a jquery code where it is copying the line text into a div class but it is copying the text for all sibling divs.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" type="text/javascript"></script>
<script >
var classes = $(".someText").text().replace(/[, -- .]/g," ");
$(".someText").addClass(classes);
</script>


#6