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

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...