Menu icon Foundation
How to make different button-group on one page

I have just found that button groups works little bit weird. Clicking on button from group2 will make all buttons from group1 inactive.

Imagine one page with two different *ul class"button-group"* blocks. Saying, buttons "Sex: male, female", and other buttons "Age: child, adult, old". So, click on "male". It becomes "pressed", or "active". Then press on "adult", it becomes pressed too, but "male" button then becomes "inactive".

I'd like to use two groups separately. I.e leave Male pressed, and leave Adult pressed as well.
How can I achieve this?
Thanks.

<ul class="button-group even-3" id="ul1">
	<li><a href="#" class="button">Child</a></li>
	<li><a href="#" class="button">Adult</a></li>
	<li><a href="#" class="button">Old</a></li>
</ul> 

<ul class="button-group even-3" id="ul2">
    <li><a href="#" class="button">Male</a></li>
	<li><a href="#" class="button">Female</a></li>
</ul> 

Foundation 5button-groopbuttons

I have just found that button groups works little bit weird. Clicking on button from group2 will make all buttons from group1 inactive.

Imagine one page with two different *ul class"button-group"* blocks. Saying, buttons "Sex: male, female", and other buttons "Age: child, adult, old". So, click on "male". It becomes "pressed", or "active". Then press on "adult", it becomes pressed too, but "male" button then becomes "inactive".

I'd like to use two groups separately. I.e leave Male pressed, and leave Adult pressed as well.
How can I achieve this?
Thanks.

<ul class="button-group even-3" id="ul1">
	<li><a href="#" class="button">Child</a></li>
	<li><a href="#" class="button">Adult</a></li>
	<li><a href="#" class="button">Old</a></li>
</ul> 

<ul class="button-group even-3" id="ul2">
    <li><a href="#" class="button">Male</a></li>
	<li><a href="#" class="button">Female</a></li>
</ul> 
Rafi Benkual over 4 years ago

This behavior is controlled by the browser and not by Foundation CSS. You can force a button to stay selected by using some jQuery or even a checkbox.

Using jQuery you can add a class like .selected to trigger the focus style https://api.jquery.com/addclass/

afon over 4 years ago

Thanks Rafi for answer.
I know that I can do this using JQuery, I was just wondering that buttons in Foundation works like buttons anywhere else. I read several other threads, lot of other people wants that functionality, but I also found an answer from developers - they will not change current behavior (buttons are not a buttons, but just squares with background). And that's it.

Thanks for answer once again.

Rafi Benkual over 4 years ago

Right now, <a> tags are styled with the .button class AND the <button>' tag is styled ad a button. So you can use thetag instead of`.

In the interest of semantics, we are going to be only styling the .button class in the next version. So then if you want a button style, you'll do

<button class="button">Click it</button>

Hope that clarifies.