Jump to content
Alana

Filtered Table-Dropdown Option Formatting

Recommended Posts

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>

Share this post


Link to post
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

×