Menu icon Foundation
Hide button in round button-group

I want to use a button stack with rounded buttons. However, some of the buttons I want hidden. For example, I have code which in essence is

<ul class="round button-group">
  <li><a href="#" class="button tiny">Button 1</a></li>
  <li><a href="#" class="button tiny">Button 2</a></li>
  <li><a href="#" class="button tiny">Button 3</a></li>
  <li><a href="#" class="button tiny">Button 4</a></li>
</ul>

In javascript I then hide buttons. Previous, i didn't use a button-group and I was able to simply toggle the 'hide' class on the button's 'a' tag (using jquery). However, now that I am using a button-group and the buttons form a nice rounded bar, if I hide the first or last button, the look of the bar is broken - the new ends don't curve nicely.

Any idea how I can hide button 1, and then have button 2 (automatically) have nice rounded left corners?

buttonbutton-groupHide

I want to use a button stack with rounded buttons. However, some of the buttons I want hidden. For example, I have code which in essence is

<ul class="round button-group">
  <li><a href="#" class="button tiny">Button 1</a></li>
  <li><a href="#" class="button tiny">Button 2</a></li>
  <li><a href="#" class="button tiny">Button 3</a></li>
  <li><a href="#" class="button tiny">Button 4</a></li>
</ul>

In javascript I then hide buttons. Previous, i didn't use a button-group and I was able to simply toggle the 'hide' class on the button's 'a' tag (using jquery). However, now that I am using a button-group and the buttons form a nice rounded bar, if I hide the first or last button, the look of the bar is broken - the new ends don't curve nicely.

Any idea how I can hide button 1, and then have button 2 (automatically) have nice rounded left corners?

Brandon Arnold over 4 years ago

You'd have to do more than just hide it with display none, but would need to use JS to actually destroy the button, since we're using CSS first and last child selectors to do this.