CODEWITHSUNDEEP
htmlcss
ATR
ATR

Reputation: 65

How can I make this filter in my code work?

I've been trying to figure out how to make this filter work in my code, where if the user clicks a category button, only the boxes associated with that word would display. It would work if there's no tags surrounding the block where the buttons are at in the html file, but once I put div tags around those block of button tags to style it, the filter stops working. I need to be able to style the buttons and put it those div tags. Is there a way to make this filter work in the non-working html code while keeping the form and filters/product div tags around the block of buttons?

Also, I'm only allowed to use CSS and HTML, (NO JAVASCRIPT)

So here's the block of code in question:

  <div class="contains">
    <div class="filters">
      <div class="product">
        <form action="" class="forms">
          <h3>Filters</h3>
          <button class="filter-btn" data-filter="warm" tabindex="-1">Warm Blooded</button>
          <button class="filter-btn" data-filter="cold" tabindex="-1">Cold Blooded</button>
          <button class="filter-btn" data-filter="toxic" tabindex="-1">Toxic</button>
          <button class="filter-btn" data-filter="*" tabindex="-1">All</button>
        </form>
      </div>
    </div>
 <!-- (other div classes representing categories) -->
 </div>

How can I make this filter work while still being in the div tags?

Below are two versions of the full running code as reference if needed.

Code of the html file that works, with no div tags around the block of category buttons:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.contains {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

button[data-filter="warm"]:focus~div:not([class*="warm"]) {
  display: none;
}

button[data-filter="cold"]:focus~div:not([class*="cold"]) {
  display: none;
}

button[data-filter="toxic"]:focus~div:not([class*="toxic"]) {
  display: none;
}

.contains .filters {
  flex-basis: 100%;
}

.product {
  padding: 15px 35px;
}

.forms {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: 300px;
  padding: 30px 20px;
  background: blue;
  color: #fff;
}

.filter-btn {
  display: block;
  margin-left: auto;
  margin-bottom: 1rem;
  background: white;
  font-size: 1rem;
  letter-spacing: 1px;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="helpstyle.css">
  <title>Animal types</title>
</head>

<body>
  <div class="contains">
    <h3>Filters</h3>
    <button class="filter-btn" data-filter="warm" tabindex="-1">Warm Blooded</button>
    <button class="filter-btn" data-filter="cold" tabindex="-1">Cold Blooded</button>
    <button class="filter-btn" data-filter="toxic" tabindex="-1">Toxic</button>
    <button class="filter-btn" data-filter="*" tabindex="-1">All</button>
    <div class="warm">
      <div class="product">
        <form action="" class="forms">
          warm
        </form>
      </div>
    </div>
    <div class="warm cold">
      <div class="product">
        <form action="" class="forms">
          warm cold
        </form>
      </div>
    </div>
    <div class="warm toxic">
      <div class="product">
        <form action="" class="forms">
          warm toxic
        </form>
      </div>
    </div>
    <div class="toxic">
      <div class="product">
        <form action="" class="forms">
          toxic
        </form>
      </div>
    </div>
    <div class="toxic cold">
      <div class="product">
        <form action="" class="forms">
          toxic cold
        </form>
      </div>
    </div>
    <div class="cold">
      <div class="product">
        <form action="" class="forms">
          cold
        </form>
      </div>
    </div>
  </div>
</body>

</html>

code of the non-working html file with div tags around the block of buttons that I need to have working:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.contains {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

button[data-filter="warm"]:focus~div:not([class*="warm"]) {
  display: none;
}

button[data-filter="cold"]:focus~div:not([class*="cold"]) {
  display: none;
}

button[data-filter="toxic"]:focus~div:not([class*="toxic"]) {
  display: none;
}

.contains .filters {
  flex-basis: 100%;
}

.product {
  padding: 15px 35px;
}

.forms {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: 300px;
  padding: 30px 20px;
  background: blue;
  color: #fff;
}

.filter-btn {
  display: block;
  margin-left: auto;
  margin-bottom: 1rem;
  background: white;
  font-size: 1rem;
  letter-spacing: 1px;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="helpstyle.css">
  <title>Animal types</title>
</head>
<body>
  <div class="contains">
    <div class="filters">
      <div class="product">
        <form action="" class="forms">
          <h3>Filters</h3>
          <button class="filter-btn" data-filter="warm" tabindex="-1">Warm Blooded</button>
          <button class="filter-btn" data-filter="cold" tabindex="-1">Cold Blooded</button>
          <button class="filter-btn" data-filter="toxic" tabindex="-1">Toxic</button>
          <button class="filter-btn" data-filter="*" tabindex="-1">All</button>
        </form>
      </div>
    </div>
    <div class="warm">
      <div class="product">
        <form action="" class="forms">
          warm
        </form>
      </div>
    </div>
    <div class="warm cold">
      <div class="product">
        <form action="" class="forms">
          warm cold
        </form>
      </div>
    </div>
    <div class="warm toxic">
      <div class="product">
        <form action="" class="forms">
          warm toxic
        </form>
      </div>
    </div>
    <div class="toxic">
      <div class="product">
        <form action="" class="forms">
          toxic
        </form>
      </div>
    </div>
    <div class="toxic cold">
      <div class="product">
        <form action="" class="forms">
          toxic cold
        </form>
      </div>
    </div>
    <div class="cold">
      <div class="product">
        <form action="" class="forms">
          cold
        </form>
      </div>
    </div>
  </div>
</body>

</html>

Thanks, help is greatly appreciated.

Upvotes: 2

Views: 158

Answers (1)

Brett Donald
Brett Donald

Reputation: 14132

The reason it's not working in your second block is that your CSS is relying on the ~ 'general sibling' selector, which requires the two elements in question to have the same parent. To my knowledge, there is no CSS selector which lets you say "apply a style to this element if this unrelated element has focus".

I would use Javascript to accomplish this kind of dynamic behaviour.

Upvotes: 1

Related Questions