Изменить стиль блока при нажатии

#javascript #html #jquery #css

                    
Не знаю JavaScript вообще. Только CSS и HTML. Помогите написать код, пожалуйста.
Допустим, у меня есть блок A 


У него есть стиль
#a {width:100px; height:100px; position:absolute (или relative, не суть); top:0px}

При нажатии на этот блок нужно чтобы у него был
top:100px; left:50px

к примеру.
Насколько мне известно, средствами CSS можно лишь сделать так, чтобы на время нажатия
на этот блок он перемещался, а когда отпустить кнопку мыши - он встанет на свое место.
Как сделать, чтобы при клике на этот блок он переместился, а при еще одном клике встал
назад?  Очень, очень и очень желательно без JavaScript, ибо я его пока что ВООБЩЕ не
знаю, если возможно. Если невозможно, помогите написать скрипт-шаблон, и хотя бы отдаленно
расскажите какая команда за что отвечает. Спасибо большое, надеюсь поможете))
UPD Возможно сделать так, чтобы при клике у него менялись свойства? Или при клике
вместо id="a" у него становился id="a1" ? Это возможно?    

Ответы

Ответ 1

Уже тыщу раз отвечал на подобный вопрос:
HTML

    
    



CSS
#a {
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    left: 0;
    border: 1px solid black;
    transition: all 0.5s;
}
.switchable input {
    display:none;
}
.switchable input:checked+#a {
    top:100px;
    left:50px
}

http://jsfiddle.net/oceog/sFEH4/
фокус в использовании :checked и следующего за ним div.
ограничение способа - нельзя помещать в такой 
 никаких input


Ответ 2

Я бы посоветовал лучше переключать классы, а не менять конкретные свойства. Например,
так jsFiddle. Я закомментировал второй вариант, который помимо того что переключает
класс, меняет и id элемента.