Checkbox Menu Toggle
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;
}<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="checkbox"name="menubar"id="d1"><labelfor="d1">Open 1</label><inputtype="checkbox"name="menubar"id="d2"><labelfor="d2">Open 2</label><inputtype="checkbox"name="menubar"id="d3"><labelfor="d3">Open 3</label><divclass="d1"><divclass="hi">Lorem ipsum dolor.</div></div><divclass="d2">Lorem ipsum dolor sit amet.</div><divclass="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><divstyle="position:relative;"><inputtype="radio"name="Menu"id="CheckMe"checked="checked"><inputtype="radio"name="Menu"id="CheckMeToo"><labelfor="CheckMe">press me</label><ulid="CM"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul><ulid="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"