Question

I have a cool script that works with two buttons. I need to add THREE more buttons as options for a total of FIVE altogether.

Does the whole script have to be re-written or could I just add more DIV classes? Not sure how to approch. Working for days on this…

Here is my link: http://jsfiddle.net/9cr4F/9/

HTML:

<div id="r6">    

<div class="bx bx1">6</div>
<div id="sp"></div>
<div class="bx bx2">Gender</div>
<div id="sp"></div>
<div id="bxGender">
<input type="button" class="gnM" >
<div id="sp"></div>
<input type="button" class="gnF">
<div id="sp"></div>
<input class="req-string gender"  id="gender" name="gender"></div>

</div>

CSS:

#r6 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.bx {
    height:60px;
    line-height:60px;
    float:left;
    font-size:105%;
    margin-top:15px;
    color: #000;
    background-color: #E8E8E8
}
.bx1 {
    width:60px;
    text-align:center
}
.bx2 {
    width:175px;
    padding-left:20px
}
#sp {
    width:  15px;
    height:60px;
    float:left;
}
.gnM {
    width:137px;
    height: 60px;
    background:#E8E8E8 url('http://www.41q.org/admin/img/male.png') 0px 0px no-repeat;
    margin-top:0px;
    padding: 0;
    border: 0;
    margin-left: 0px;
    float: left;
    outline: none;
    text-align:center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 105%;
    font-style:normal;
    color:#03F;
}
.gnF {
    width:137px;
    height: 60px;
    background:#E8E8E8 url('http://www.41q.org/admin/img/female.png') 0px 0px no-repeat;
    margin-top:0px;
    padding: 0;
    border: 0;
    margin-left: 0px;
    float: left;
    outline: none;
    text-align:center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 105%;
    font-style:normal;
    color:#03F;
}
#r6 #bxGender .button-toggle-on {
    background-position: 0 -120px
}
#bxGender {
    width:486px;
    height:60px;
    float:left;
    margin-top:15px
}

#r6:hover div.bx, #r6:hover input {background-color: #A9A9A9; cursor:pointer}
#r6:hover .gnM, #r6:hover .gnF {background-position: 0 -60px; cursor:pointer}

jQuery:

$(function() {
    var $buttons = $("input[type='button']");
    $buttons.click(function() {

        $(this).parent().siblings('.bx, #bxGender .gender').css({'background':'#2F2F2F','color':'#fff'});
        $buttons.not(this).removeClass('button-toggle-on');
        $(this).toggleClass('button-toggle-on').attr('style','');

        var varval = '';
        if ($(this).hasClass('button-toggle-on')) {
            varval = $(this).hasClass('gnF') ? 'Female' : 'Male';
            $(this).siblings('input[type="button"]').css('background-position','0 -180px');
        }
        else {
              $(this).siblings('input[type="button"]').attr('style','');
           $(this).parent().siblings('.bx').attr('style','');
        }
        $("#gender").val(varval);
    });
});

Answer 1

First thing you need is a markup to validate, at the moment it is not, IDs in a document must be UNIQUE so when you do

<div id="sp"></div>

you should do

<div class="sp"></div>

and try to get the clone nicely nested, even if it copies badly in here sometimes it helps to even have just few spaces here and there 🙂

In your CSS don’t repeat the same properties if it applies to multiple elements, for example I restructured your gnF and gnM class, so all the properties are together and only the background image property is seperate.

.gnM, 
.gnF, 
.gnA {
    background:#E8E8E8 0px 0px no-repeat; 
    text-indent:-10000px;
    width:137px;
    height: 60px;
    margin-top:0px;
    padding: 0;
    border: 0;
    margin-left: 0px;
    float: left;
    outline: none;
    text-align:center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 105%;
    font-style:normal;
    color:#03F;
}
.gnA {
    background-image:url('http://www.41q.org/admin/img/alien.png');   
}
.gnM {
    background-image:url('http://www.41q.org/admin/img/male.png');   
}
.gnF {
    background-image:url('http://www.41q.org/admin/img/female.png');
}

You can simplify the jquery side by using the value attribute on your button, if you set a text-indent then the text wont show, and then you can simply retrieve the value using $(this).val();

$(function() {

    var $buttons = $("input[type='button']"),
        varval;

    $buttons.click(function() {

        // this should be done using a class to keep the js cleaner
        $(this).parent().siblings('.bx, #bxGender .gender').css({
            'background': '#2F2F2F',
            'color': '#fff'
        });

        $buttons.removeClass('button-toggle-on');
        $(this).addClass('button-toggle-on');

        $("#gender").val($(this).val());
    });
});​

This gives you a lot more flexibility as you can have as many button as you want but if you are building a form with multiple rows, as it seems, I would suggest also using a class for the input that contains the result and modify the value assignment so that it grabs the closest result input and update that, so that way it works for all rows.

Here is the modified fiddle http://jsfiddle.net/9cr4F/14/ – the third buttons styling is screwed of course but I’m sure it gives you what you need 🙂

Edited: Optimized CSS a bit more
Edited 2: Optimized the jquery code and move the background positioning to the class button-toggle-on as it is on when the background position need to be applied.