Uncode Uncode - 1 month ago 8
CSS Question

How to make button in unordered list "highlight" by adding a border on click?

I have these buttons in a

<ul>
and when one is selected I would like for it to be highlighted by adding a yellow border around it or changing the black border that is already there to yellow. If another button is selected, then the "highlight" would change to the new selection.

This is the output"

$output .= '<ul id="give-donation-level-button-wrap" class="give-donation-levels-wrap">';

foreach ( $prices as $price ) {
$counter ++;
$level_text = apply_filters( 'give_form_level_text', ! empty( $price['_give_text'] ) ? $price['_give_text'] : give_currency_filter( give_format_amount( $price['_give_amount'] ) ), $form_id, $price );
$level_classes = apply_filters( 'give_form_level_classes', 'give-donation-level-btn give-btn give-btn-level-' . $counter . ' ' . ( ( isset( $price['_give_default'] ) && $price['_give_default'] === 'default' ) ? 'give-default-level' : '' ), $form_id, $price );

$output .= '<li">';
$output .= '<button type="button" data-price-id="' . $price['_give_id']['level_id'] . '" class=" ' . $level_classes . '" value="' . give_format_amount( $price['_give_amount'] ) . '">';
$output .= $level_text;
$output .= '</button>';
$output .= '</li>';

}


Not sure if it can be done in CSS or if it should be done in java. Either way, how can I accomplish this?

In case you want to see a live demo of the buttons:
http://74.220.215.60/~xthrdmac/green/home-4-2/

Answer

Add these html codes below your page click here for codepen

<style>
    .add_yellow{
        border:3px solid yellow !important;
    }
    .add_black{
        border:3px solid #000 !important;
    }
</style>
<script>
    function clicker(e){
        console.log("click");
        for(var pos=0;pos<all_btns.length;++pos){
            if(e.target!=all_btns[pos]){
                all_btns[pos].classList.remove('add_yellow')
                all_btns[pos].classList.add('add_black')
            }
            else{
                all_btns[pos].classList.remove('add_black')
             all_btns[pos].classList.add('add_yellow')
            }
        }
    }
    var all_btns=document.querySelectorAll("#give-donation-level-button-wrap .give-donation-level-btn");
    for(var pos=0;pos<all_btns.length;++pos){
        all_btns[pos].addEventListener('click',clicker)
    }

</script>
Comments