Alana Posted November 26, 2018 Share Posted November 26, 2018 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/#&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> Link to comment Share on other sites More sharing options...
dsonesuk Posted November 26, 2018 Share Posted November 26, 2018 One of those gremlins has replaced '$' with '&' &(document).ready(function(){ You got to watch out for those little blighter's. 1 Link to comment Share on other sites More sharing options...
Alana Posted November 26, 2018 Author Share Posted November 26, 2018 Thank you very much! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now