Jump to content

Recommended Posts

Hello!

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?

 

 

http://jsfiddle.net/AlanaVibes/xNj9z/92/#&amp;togetherjs=ROVpoPMv4L

<html lang="en">
<head>
  <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>
  <script>
  $( function() {
    $( "input" ).checkboxradio();
  } );
  </script>
 
 
</head>
<body>
<div class="widget">
  <h1>Our Manufacturers</h1>
 
  <fieldset>
    <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">
  </fieldset>
 
 
 
  <script>
  &(document).ready(function(){
  $("#flip").click(function(){
  $("#panel").slideToggle("slow");
  });
  });
  </script>
 
  <style>
  #panel, #flip {
    padding: 5px;
    text-align: left;
    background-color: white;
    border: solid 1px #c3c3c3;
}

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

    <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">
    </fieldset>
</div>
 
 
</body>
</html>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...