Geek Answers Handbook

Create a div that acts like an html flag.

I want to enable / disable the div on click (it should act like an html flag) and make visible changes using css. Is this possible without Javascript, or will I have to use Javascript?

If you created such a script, share it.

Thank you for your help.

+4
source share
4 answers

You can do this very easily with just CSS code by hiding the checkboxes and styling their labels like this:

HTML

<div id="checkboxes">
    <input type="checkbox" name="rGroup" value="1" id="r1" checked="checked" />
    <label class="whatever" for="r1"></label>
    <input type="checkbox" name="rGroup" value="2" id="r2" />
    <label class="whatever" for="r2"></label>
    <input type="checkbox" name="rGroup" value="3" id="r3" />
    <label class="whatever" for="r3"></label>
</div>

CSS

.whatever{
    background-color: red;
    display: inline-block;
    width: 100px;
    height: 100px;
}

#checkboxes input[type=checkbox]{
    display: none;
}

#checkboxes input[type=checkbox]:checked + .whatever{
    background-color: green;
}

You can take a look at this simple code in action:
JSFiddle

I hope this helps! :)

+12
source

, jQuery (1.5.2). , , , ?, - , . script div id on_off ( var!) class for on (on_off_on) off (on_off_off) , , jsFiddle script -

HTML -

<html>
     <head>
            <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js" ></script>
     </head>
     <body>
           <div id="on_off" class="on_off_on" >ON</div>
     </body>
</html>

CSS -

div.on_off_off
{
 background: rgb(150,110,120);
 font-family: segoe ui;
 font-size: 12px;
 font-weight: bold;
 padding: 5px 10px;
 border: 3px solid rgb(180, 140, 150);
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 color: #fff;
 display: inline;
}
div.on_off_on
{
 background: rgb(110,150,120);
 font-family: segoe ui;
 font-size: 12px;
 font-weight: bold;
 padding: 5px 10px;
 border: 3px solid rgb(140, 180, 150);
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 color: #fff;
 display: inline;
}

jQuery -

$(document.body).ready(function () {
    $(function () {

      var main_obj_id = 'on_off';
      var on_class = 'on_off_on';
      var off_class = 'on_off_off';        

        $('#' + main_obj_id).click(function () {
              if ($(this).is('.' + on_class)) {

                 $(this).removeClass(on_class);
                 $(this).addClass(off_class);
                 $(this).html('OFF');

              } else {

                 $(this).removeClass(off_class);
                 $(this).addClass(on_class);
                 $(this).html('ON');                  

              }
        });
    });
});

, !

+2

javascript, label, div, :

<input name="checkbox1" id="checkbox1" type="checkbox">
<label for="checkbox1">
   Click me
</label>

css:

input {
  display:none;
}
:checked + label {
  border: 1px solid rgba(81, 203, 238, 1);
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}

. CSS- http://jsfiddle.net/vyP7c/761/

+2

, javascript, . css div .

<a href='javascript: toggle()'>toggle</a>
<div id='div1' style='display:none'>
Don't display me
</div>

<script>
function toggle(){
    var div1 = document.getElementById('div1')
    if (div1.style.display == 'none') {
        div1.style.display = 'block'
    } else {
        div1.style.display = 'none'
    }
}
</script>
0

More articles:


All Articles