Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Jquery

Checkbox Menu Toggle

Post a Comment
If checkbox1 is checked none of the others should be. If checkbox2 is checked none of the others should be. Sounds simple right? Well my problem here is I want to be able to also t

Solution 1:

Assuming you have some reason to prefer checkboxes to radios, I believe this will do what you want:

$("input:checkbox").on("change", function() {
  $(this).toggleClass("active");
  $("input:checkbox").not(this).removeClass("active").prop('checked', false);
})
.d1, .d2, .d3 {
  display: none;
}

#d1:checked ~ .d1 {
  display: block;
}
#d2:checked ~ .d2 {
  display: block;
}
#d3:checked ~ .d3 {
  display: block;
}

.active {
  color: #6d4dfe;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="menubar" id="d1">
<label for="d1">Open 1</label>
<input type="checkbox" name="menubar" id="d2">
<label for="d2">Open 2</label>
<input type="checkbox" name="menubar" id="d3">
<label for="d3">Open 3</label>

<div class="d1"><div class="hi">Lorem ipsum dolor.</div></div>
<div class="d2">Lorem ipsum dolor sit amet.</div>
<div class="d3">Lorem ipsum dolor sit amet, consectetur adipisicing.</div>

Solution 2:

Should be something like this:

<html>
<head>
    <style>
        ul{
            float: left;
            overflow: hidden;
            height: auto;
            display: none;
            background-color: red;
        }
        #CheckMe:checked ~ #CM{
            display: block;
        }

        #CheckMeToo:checked ~ #CMT{
            display: block;
        }
    </style>
</head>
<body>
  <div style="position:relative;">
   <input type="radio" name="Menu" id="CheckMe" checked="checked">
   <input type="radio" name="Menu" id="CheckMeToo">
   <label for="CheckMe">press me</label>
    <ul id="CM">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <ul id="CMT">
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
    </ul>
    </div>
</body>
</html>

There's no reason to use javascript, jquery or checkboxes if you want something to show depending on what box is checked. Radioboxes with the same name only allows for one of them to be checked, so yeah.


Post a Comment for "Checkbox Menu Toggle"