Alana Posted November 19, 2018 Share Posted November 19, 2018 How do I change the formatting of the drop down tab? I need each category to be shorter and stack nicer. http://03f7e3d.netsolhost.com/wordpress1/manufacturers/ <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { background-color: #ffffff; padding: 14px; font-family: Garamond; } /* Center website */ .main { width: 1000px; margin: auto; } h1 { font-size: 40px; word-break: break-all; } .row { margin: 40px; } /* Add padding BETWEEN each column */ .row, .row>.column { padding: 16px; } /* Create 5 equal columns that floats next to each other */ .column { float: left; width: 20%; display: none; } /* Clear floats after rows */ .row:after { content: ""; display: table; clear: both; } /* Content */ .content { background-color: white; padding: 14px; width: 180px; height: 75px; } /* The "show" class is added to the filtered elements */ .show { display: block; } /* Style the buttons */ .btn { border: none; outline: none; padding: 4px; background-color: #ebebee; color: black; cursor: pointer; font-family: :times, sans-serif; } .btn:hover { background-color: #c6c6c6; } .btn.active { background-color: #848484; color: white; } </style> </head> <body> <!-- MAIN (Center website) --> <div class="Main"> <CENTER> <h1>Our Manufacturers</h1> </CENTER> <hr> <div id="myBtnContainer"> <button class="btn active" onclick="filterSelection('ALL')">All</button> <button class="btn" onclick="filterSelection('NTX')"> North Texas</button> <button class="btn" onclick="filterSelection('OK')"> Oklahoma</button> <button class="btn" onclick="filterSelection('AR')"> Arkansas</button> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .dropbtn { background-color: #ebebee; color: black; padding: 7px; font-size:14px; border: none; } .dropdown { position: relative; display: inline-block; text-align: left; } .dropdown-content { display: none; position: absolute; background-color: #ebebee; min-width: 220px; z-index: 1; } .dropdown-content a { color: black; padding: 3px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #ffff; } </style> </head> <div class="dropdown" id="dropdown"> <button class=" dropbtn">…</button> <div class=" dropdown-content"> <button class="btn" onclick="filterSelection('WC')"> Wire & Cable</button> <button class="btn" onclick="filterSelection('ACC')"> Wire & Cable Accessories</button> <button class="btn" onclick="filterSelection('MC')"> Motor Control</button> <button class="btn" onclick="filterSelection('WD')"> Wiring Devices</button> <button class="btn" onclick="filterSelection('CF')"> Conduit & Fittings</button> <button class="btn" onclick="filterSelection('FUS')"> Fuses</button> <button class="btn" onclick="filterSelection('TOOL')"> Tools & Fasteners</button> <button class="btn" onclick="filterSelection('EW')"> Enclosures & Wireway</button> <button class="btn" onclick="filterSelection('SPEC')"> Specialty</button> </div> </div> </div> </body> </html> </div> </body> </html> <!-- Portfolio Gallery Grid --> <!--Start TOA--!> <div class="column ALL, column NTX, column OK, column AR, column SPEC"> <div class="content"> <center><a href="https://www.airkinglimited.com" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/AirKing.jpg" alt="Air King" style=" height:48px"></center> </div> </div> <div class="column ALL,column NTX, column OK, column AR,column WC"> <div class="content"> <center><a href="https://www.cmewire.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/CME-2.png" alt="CME" style="height:54px"></center> </div> </div> <div class="column ALL,column NTX, column ACC, column CF, column TOOL"> <div class="content"> <center><a href="https://www.lhdottie.com target="_blank"/"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Dottie-2.png" alt="Dottie" style="height:48px"></center> </div> </div> <div class="column ALL,column OK, column TOOL"> <div class="content"> <center><a href="https://www.dewalt.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Dewalt-2.png" alt="Dewalt" style="height:41px"></center> </div> </div> <div class="column ALL,column OK, column SPEC"> <div class="content"> <center><a href="https://www.dymo.com/en-US" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Dymo.png" alt="Dymo" style="height:42px"></center> </div> </div> <div class="column ALL,column NTX, column OK, column AR, column FUS"> <div class="content"> <center><a href="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Bussman.png" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Edison-2.png" alt="Edison" style="height:45px"></center> </div> </div> <div class="column ALL,column OK, column AR, column FUS"> <div class="content"> <center><a href="http://http://www.cooperindustries.com/content/public/en/bussmann.html" target="_blank"> <img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/10/Eaton-Bussman.png" alt="Bussman" style="height:46px"></center> </div> </div> <div class="column ALL,column NTX, column OK, column CF, column EW"> <div class="content"> <center> <a href="http://www.cooperindustries.com/content/public/en/b-line.html" target="_Blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/B-line.png" alt="B-Line" style="height:48px"></center> </div> </div> <div class="column ALL,column NTX, column OK, column CF, column MC"> <div class="content"> <center><a href="http://www.cooperindustries.com/content/public/en/crouse-hinds.html" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Crouse-Hinds.png" alt="Crouse Hinds" style="height:52px"></center> </div> </div> <div class="column ALL,column NTX, column OK, column AR, column WD"> <div class="content"> <center> <a href="http://www.cooperindustries.com/content/public/en/wiring_devices.html" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Wiring-Devices.png" alt="Eaton Wiring" style="height:52px"></center> </div> </div> <div class="column ALL,column NTX,column OK, column AR, column LIT"> <div class="content"> <center> <a href="https://www.eiko.com/" target="_blank"> <img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Eiko-2.png" alt="Eiko" style="height:50px"></center> </div> </div> <div class="column ALL,column NTX, column WC"> <div class="content"> <center><a href="http://www.galvanelectrical.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Galvan-2.png" alt="Galvan" style="height:20px"></center> </div> </div> <div class="column ALL,column NTX, column OK, column WC"> <div class="content"> <center><a href="https://www.generalcable.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/General-Cable-2.png" alt="General Cable" style="height:24px"></center> </div> </div> <div class="column ALL,column NTX, column EW"> <div class="content"> <center><a href="http://www.highlineproducts.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Highline.jpg" alt="Maclean Highline" style="height:21px"></center> </div> </div> <div class="column ALL,column NTX, column CF"> <div class="content"> <center><a href="http://www.ipexna.com/usa" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Ipex.png" alt="Ipex" style="height:48px"></center> </div> </div> <div class="column ALL,column OK, column TOOL"> <div class="content"> <center><a href="https://www.irwin.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Irwin-2.png" alt="Irwin Tools" style="height:48px"></center> </div> </div> <div class="column ALL,column OK, column TOOL"> <div class="content"> <center><a href="https://www.lenoxtools.com/Pages/Home.aspx" target="_Blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Lenox.png" alt="Lenox" style="height:30px"></center> </div> </div> <div class="column ALL,column NTX, column OK, column ACC, column LIT, column TOOL"> <div class="content"> <center><a href="http://www.nsiindustries.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/NSI-2.png" alt="NSI" style="height:48px"></center> </div> </div> <div class="column ALL,column NTX, column CF"> <div class="content"> <center><a href="http://www.nec-inc.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/nec.png" alt="NEC" style="height:64px"></center> </div> </div> <div class="column ALL,column NTX, column CF"> <div class="content"> <center><a href="https://www.patriotsas.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Patriot-2.png" alt="Patriot" style="height:48px"></center> </div> </div> <div class="column ALL,column NTX,column OK, column SPEC"> <div class="content"> <center><a href="https://www.polywater.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Polywater-2.png" alt="Polywater" style="height:42px"></center> </div> </div> <div class="column ALL,column NTX, column CF"> <div class="content"> <center><a href="http://www.primeconduit.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Prime-2.png" alt="Prime" style="height:28px"></center> </div> </div> <div class="column ALL,column OK, column SPEC"> <div class="content"> <center><a href="https://www.sharpie.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Sharpie-2.png" alt="Sharpie" style="height:43px"></center> </div> </div> <div class="column ALL,column NTX, column OK, column AR, column MC"> <div class="content"> <center> <a href="http://spikeelectric.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Spike.png" alt="Spike" style="height:42px"></center> </div> </div> <div class="column ALL,column OK"> <div class="content"> <center><a href="https://www.westerntube.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Western-Tube-2.png" alt="Western Tube" style="height:30px"></center> </div> </div> </hr> </table</table> <!--END Combined--!> <!-- END MAIN --> <!-- END GRID --> <script> filterSelection("all") function filterSelection(c) { var x, i; x = document.getElementsByClassName("column"); if (c == "all") c = ""; for (i = 0; i < x.length; i++) { w3RemoveClass(x, "show"); if (x.className.indexOf(c) > -1) w3AddClass(x, "show"); } } function w3AddClass(element, name) { var i, arr1, arr2; arr1 = element.className.split(" "); arr2 = name.split(" "); for (i = 0; i < arr2.length; i++) { if (arr1.indexOf(arr2) == -1) { element.className += " " + arr2; } } } function w3RemoveClass(element, name) { var i, arr1, arr2; arr1 = element.className.split(" "); arr2 = name.split(" "); for (i = 0; i < arr2.length; i++) { while (arr1.indexOf(arr2) > -1) { arr1.splice(arr1.indexOf(arr2), 1); } } element.className = arr1.join(" "); } // Add active class to the current button (highlight it) var btnContainer = document.getElementById("myBtnContainer"); var btns = btnContainer.getElementsByClassName("btn"); for (var i = 0; i < btns.length; i++) { btns.addEventListener("click", function() { var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; }); } var btnContainer = document.getElementById("dropdown"); var btns = btnContainer.getElementsByClassName("btn"); for (var i = 0; i < btns.length; i++) { btns.addEventListener("click", function() { var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; }); } </script> </body> </html> Link to comment Share on other sites More sharing options...
dsonesuk Posted November 19, 2018 Share Posted November 19, 2018 Well it would help if it was correct valid code! Validate it here https://validator.w3.org/ then get back to us. 1 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