jQuery toggle 3 Div

Question

I wanna toggle 3 div. In the start situation I have the first div that is not trigger able for the clic because its ID. When I click the second or third div (triggered), the DIV clicked have to become unclickable and the others 2 clickable.

I attach my live example:

http://jsfiddle.net/YV3V5/

HTML:

<div id = "not-selectable" class = "btn1">Div 1</div>
<div id = "selectable" class = "btn2">Div 2</div>
<div id = "selectable" class = "btn3">Div 3</div>

JAVASCRIPT:

$( "#selectable" ).click(function(e) {


    var className = $(this).attr('class');

    alert(className);

    if (className == "btn1") {
        $("btn1").attr("selectable","not-selectable");
        $("btn2").attr("not-selectable","selectable");
        $("btn3").attr("not-selectable","selectable");   
    } else if (className == "btn2") {
        $("btn2").attr("selectable","not-selectable");
        $("btn1").attr("not-selectable","selectable");
        $("btn3").attr("not-selectable","selectable");   
    } else if (className == "btn3") {
        $("btn3").attr("selectable","not-selectable");
        $("btn1").attr("not-selectable","selectable");
        $("btn2").attr("not-selectable","selectable");   
    }

});

In this situation when I click the second DIV, it should became unclickable....but nothing happens.

Thanks for you're help!

Answer 1

You have several errors in your code. The most important being that IDs should be unique. Secondly you are trying to assign values to attributes "selectable" and "not-selectable". These attributes do not exist.

If you lay out your markup correctly, you could do this pretty simple. I would suggest something like this:

HTML

<div class="buttons">
    <div class="button">Div 1</div>
    <div class="button selectable">Div 2</div>
    <div class="button selectable">Div 3</div>
</div>

jQuery

$( ".buttons" ).on("click",".selectable",function(e) {
    $('.button').addClass('selectable');
    $(this).removeClass('selectable');
});

Can be tested here

(I've added a parent element to simplify event delegation in jQuery.)

Answer 2

there is no attribute called selectable for html tags.

when you write $("btn3").attr("selectable","not-selectable"); it means set the selectable attribute of btn3 to value 'not-selectable'.

also as btn3 is a class you should have written $('.btn3') instead of $('btn3')

Answer 3

WORKING DEMO http://jsfiddle.net/YV3V5/23/

There was a lot wrong with your code :

1) using duplicate id's : Id's must be unique , one per page. Classes do not have to be unique. So I changed around your id's and classes.

2) you should change classes with addClass/removeClass/or toggleClass

3) you shouldn't use a class your removing as the trigger of the click function, so I gave them all a same class of btn .

html :

<div id="btn1" class="not-selectable btn">Div 1</div>
<div id="btn2" class="selectable btn">Div 2</div>
<div id="btn3" class="selectable btn">Div 3</div>

css I added background of blue for selectable and red for not-selectable so easier to visualize what's happening :

.selectable {
    background: blue;
}
.not-selectable {
    background: red;
}

jquery :

$(document).ready(function () {

    $(".btn").click(function (e) {

        var id = $(this).attr('id');

        if (id == "btn1") {
            $("#btn1").removeClass("selectable").addClass("not-selectable");
            $("#btn2").addClass("selectable").removeClass("not-selectable");
            $("#btn3").addClass("selectable").removeClass("not-selectable");
        } else if (id == "btn2") {
            $("#btn2").removeClass("selectable").addClass("not-selectable");
            $("#btn1").addClass("selectable").removeClass("not-selectable");
            $("#btn3").addClass("selectable").removeClass("not-selectable");
        } else if (id == "btn3") {
            $("#btn3").removeClass("selectable").addClass("not-selectable");
            $("#btn1").addClass("selectable").removeClass("not-selectable");
            $("#btn2").addClass("selectable").removeClass("not-selectable");
        }

    });

});

Answer 4

.attr() sets the attribute to the tags. So like you would get <div non-selectable='selectable'> for that code. Here is the documentation . I would use .removeClass() and .addClass() though there might be a more efficient way.