Jump to content


Recommended Posts


I am looking for some assistance with my drop down panel.

When I try to add "<div id="panel"></div> to the "select to filter by type section", it does not toggle the panel at all.

Can you tell me what I am doing incorrectly?




<html lang="en">
  <meta charset="utf-8">
  <title>jQuery UI Checkboxradio - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  $( function() {
    $( "input" ).checkboxradio();
  } );
<div class="widget">
  <h1>Our Manufacturers</h1>
    <legend>Select a Territory: </legend>
    <label for="radio-1">All</label>
    <input type="radio" name="radio-1" id="radio-1">
    <label for="radio-2">North Texas</label>
    <input type="radio" name="radio-1" id="radio-2">
    <label for="radio-3">Oklahoma</label>
    <input type="radio" name="radio-1" id="radio-3">
    <label for="radio-4">Arkansas</label>
    <input type="radio" name="radio-1" id="radio-4">
  #panel, #flip {
    padding: 5px;
    text-align: left;
    background-color: white;
    border: solid 1px #c3c3c3;

#panel {
    padding: 50px;
    display: none;
  <div id="flip"> <h2>Type of Material</h2></div>

    <legend> Select to filter by Type </legend>
    <label for="checkbox-1">Wire & Cable</label>
    <input type="checkbox" name="checkbox-1" id="checkbox-1">
    <label for="checkbox-2">Wire & Cable Accessories</label>
    <input type="checkbox" name="checkbox-2" id="checkbox-2">
    <label for="checkbox-3">Conduit & Fittings</label>
    <input type="checkbox" name="checkbox-3" id="checkbox-3">
    <label for="checkbox-4">Wiring Devices</label>
    <input type="checkbox" name="checkbox-4" id="checkbox-4">
    <label for="checkbox-5">Enclosures & Wireway</label>
    <input type="checkbox" name="checkbox-4" id="checkbox-5">
    <label for="checkbox-6">Lighting</label>
    <input type="checkbox" name="checkbox-4" id="checkbox-6">
    <label for="checkbox-7">Fuses</label>
    <input type="checkbox" name="checkbox-4" id="checkbox-7">
    <label for="checkbox-8">Tools & Fasteners</label>
    <input type="checkbox" name="checkbox-4" id="checkbox-8">
    <label for="checkbox-9">Motor Control</label>
    <input type="checkbox" name="checkbox-4" id="checkbox-9">
    <label for="checkbox-10">Specialty</label>
    <input type="checkbox" name="checkbox-4" id="checkbox-10">

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...