I do not know JavaScript at all. Only CSS and HTML. Help write code, please.

Suppose I have a block A

<div id="a"></div>

He has a style

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

When you click on this block you need to have

 top:100px; left:50px

for example.

As far as I know, using CSS can only be done so that when you click on this block it moves, and when you release the mouse button, it will fall into place. How to make it so that when it clicks on this block, it moves, and with another click it gets back? Very, very, very desirable without JavaScript, because I do not yet know AT ALL, if possible. If not, help write a script template, and at least remotely tell which team is responsible for what. Thank you very much, I hope you will help))

UPD Is it possible to make it so that when he clicks, his properties change? Or did he become id = "a1" instead of id = "a"? Is it possible

    2 answers 2

    Already a thousand times answered this question:

    HTML

     <label class="switchable"> <input type="checkbox" /> <div id="a"></div> </label>

    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/

    Focus in use: checked and the div following.

    method limitation - no input can be placed in such a <div>

    • ... Thank you, it was useful ... I am looking for a long time! And how, in this case, do I have to move not just one block (style change), but 5-7 blocks at once ..... at what everyone has his own style ... I hope for help, for I’m a Kettle ... and the code is needed :) - user15746
    • First , secondly, use <label for> and switchable input:checked~.myotherblocks - zb switchable input:checked~.myotherblocks

    I would advise better to switch classes, and not to change specific properties. For example, so jsFiddle . I commented out the second option, which in addition to switching the class, changes the id of the element.