CSS not working in JS

Hi again,
The following CSS works OK when it’s accessed from within the HTML but when JS is involved, it doesn’t take effect. The checkmark \2713 displays in #dad8da as one part of the css states. However, the ‘checked’ status which should show green, doesn’t have any visible effect.

Also, the “.tab input:checked ~ .tab-content” seems to have no effect because it forces the tab-content to be open all the time. Perhaps it ignores “:checked”, when running through JS and so, it applies it all the time?

Please give me a pointer. I have read about pseudo elements in JS but I can’t work out the solution.
The JS I have tried

$('head').append("<style>.tab-content input[type=checkbox]:checked + label::before { content: '\\2713';transform: none;color: green;font-weight: 700;}</style>");

the css that works within HTML

<style>
.tab input:checked ~ .tab-content {
  max-height: 200vh;
}

.tab-content input[type=checkbox] + label::before{
  content: '\\2713' !important;
  color: #dad8da;
  margin-right: 10px;
  -webkit-transition: all .75s;
  -o-transition: all .75s;
  transition: all .75s;
}

.tab-content input[type=checkbox]:checked + label::before {
  content: "\\2713";
  transform: none;
  color: green; /*#a31e22;*/
  font-weight: 700;
}
</style>

and here the JS ‘html’ output

if ( available_categories )
  {
  dataset += "<div class=\\"tab\\">"
           + "<input id=\\"tab-one\\" type=\\"checkbox\\" name=\\"tabs\\" />" 
           + "<label for=\\"tab-one\\">product category</label>" 
           + "<div class=\\"tab-content\\">";

  // loop through the array to output more data
  \$.each(available_categories, function(k , v) 
  {

      \$.each(this, function(k , v) 
      {
      dataset += "<p>" 
               + "<input type=\\"checkbox\\" id=\\"product_category:"+v+"\\" />"+"<label for=\\"product_category:"+v+"\\">"+v+"</label>"+"</p>";
      })
  })
  dataset += "</div></div>";
  }

and here’s the array for that JS

{product_category: "kitchen electrical"},
{product_category: "utensils"},
{product_category: "kitchen knives"}

I’d appreciate any help you may offer.

Bazz

CSS goes inside a style tag and I don’t see one in your js?

Include the style tag in your append.

Thanks Paul,

Having added the style tags, there seems to be no change.
I can confirm that the JS console throws no warnings or errors since I put all the css on one line. Still behaving badly.

 
$('head').append("<style>.tab { position: relative; margin-bottom: 0; width: 100%; color: #fff;}.tab input { position: absolute; opacity: 0; z-index: -1;}.tab label { position: relative; display: block;padding: 0 0 0 10px;background: #717074;font-weight: bold;line-height: 1.5em; cursor: pointer;} .tab-content { max-height: 0; width: 100%;overflow: hidden; font-size: 0.7em;background: inherit; -webkit-transition: max-height .50s; -o-transition: max-height .50s; transition: max-height .50s;}.tab-content label{background-color: #fff;margin:0;padding:0;border:0;color: #717074;}.tab-content p {  clear:left;  display:block;  text-align:left; margin: 0;   border: 1px solid #1b1b1b; border-left: 0;  border-right:0;  border-top:0;}.tab input:checked ~ .tab-content { max-height: 200vh;}.tab label::after {  position: absolute;  right: 0;  top: 0;  display: inline-block;  vertical-align:middle;  -webkit-transition: all 1.35s;  -o-transition: all 1.35s;  transition: all 1.35s;}.tab input[type=checkbox] + label::after {  content: '+';  display:none;}.tab input[type=radio] + label::after { content: '\25BC';}.tab input[type=checkbox]:checked + label::after { transform: rotate(315deg); }.tab input[type=radio]:checked + label::after { transform: rotateX(180deg);}.lowercase{text-transform:lowercase;}.tab-content input{  position: initial;  display:none; opacity: 0; z-index:initial;  margin: 1em;}.tab-content label{  display: block; line-height: 1.5em;}.tab-content input[type=checkbox] + label::after{ display:none; content:'';}.tab-content input[type=checkbox] + label::before{  content: '\2713' !important;  color: #dad8da;  margin-right: 10px; -webkit-transition: all .75s;  -o-transition: all .75s;  transition: all .75s;}.tab-content input[type=checkbox]:checked + label::before {  content: '\2713'; transform: none;  color: green; font-weight: 700;}}</style>");

So, specifically it’s this before element that is not working

.tab-content input[type=checkbox]:checked + label::before {  content: '\2713'; transform: none;  color: green; font-weight: 700;}

and this

.tab input:checked ~ .tab-content { max-height: 200vh;}

I think if I can get those to work, the issues I can see will be gone.

Bazz

Whats the backslash for before the jquery dollar sign?

Hi Paul,

That backslash is required by the Perl processor. I have removed them for ease of help but I overlooked that one. It’s removed now (in the [edited] post above)

Bazz

Can you do a view source of your live page so that we can see what html we are dealing with for the tab sections. If the CSS is added correctly then it should work as if it was already there. I’ve just added your css dynamically and it seems to take effect if the html is organised properly but I’m just guessing at your structure.

I do notice that there is an extra bracket in your css at the end but it shouldn’t affect anything unless there are more rules following.

A live demo would help greatly :slight_smile:

Hi Paul,

Below is the html. I noticed that when I saved the page from my browser, and opened it locally, the accordion filter menu stayed open as it should, when I clicked on a parent element. The green ::before arrow doesn’t show though .



      <h1>home &amp; garden</h1>
  <div id="filtering_div" style="display:none">
          <div class="tab">
           <input id="tab-zero" type="checkbox" name="tabs">
           <label for="tab-zero"></label> 
              <div class="tab-content">  
                <p>
                  <input type="checkbox" id="product_department:home &amp; garden" checked="checked">
                  <label for="product_department:home &amp; garden">home &amp; garden</label>
                </p>
              </div>
          </div>

          <div class="tab">
            <input id="tab-zone" type="checkbox" name="tabs">
            <label for="tab-zone"></label>
            <div class="tab-content">  
                  <p>
                    <input type="checkbox" id="product_category:kitchen equipment">
                    <label for="product_category:kitchen equipment">kitchen equipment <span class="lowercase"></span></label>
                  </p> 
            </div>
          </div>
          <div class="tab">
            <input id="tab-ztwo" type="checkbox" name="tabs">
            <label for="tab-ztwo"></label>
            <div class="tab-content">  
                  <p>
                    <input type="checkbox" id="sub_category:kettles">
                    <label for="sub_category:kettles">kettles <span class="lowercase"></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:pedal bins">
                    <label for="sub_category:pedal bins">pedal bins <span class="lowercase"></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:tea makers">
                    <label for="sub_category:tea makers">tea makers <span class="lowercase"></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:utensils">
                    <label for="sub_category:utensils">utensils <span class="lowercase"></span></label>
                  </p> 
            </div>
          </div>
          <div class="tab">
            <input id="tab-zthree" type="checkbox" name="tabs">
            <label for="tab-zthree"></label>
            <div class="tab-content">  
                  <p>
                    <input type="checkbox" id="brand_name:brabantia">
                    <label for="brand_name:brabantia">brabantia <span class="lowercase"></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="brand_name:goodgrips">
                    <label for="brand_name:goodgrips">goodgrips <span class="lowercase"></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="brand_name:kenwood">
                    <label for="brand_name:kenwood">kenwood <span class="lowercase"></span></label>
                  </p> 
            </div>
          </div>
          <div class="tab">
            <input id="tab-zfour" type="checkbox" name="tabs">
            <label for="tab-zfour"></label>
            <div class="tab-content">  
                  <p>
                    <input type="checkbox" id="colours:red black and silver">
                    <label for="colours:red black and silver">red black and silver <span class="lowercase"></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="colours:stainless steel">
                    <label for="colours:stainless steel">stainless steel <span class="lowercase"></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="colours:stainless steel &amp; black">
                    <label for="colours:stainless steel &amp; black">stainless steel &amp; black <span class="lowercase"></span></label>
                  </p> 
            </div>
          </div>
          <div class="tab">
            <input id="tab-zsix" type="checkbox" name="tabs">
            <label for="tab-zsix"></label>
            <div class="tab-content">  
                  <p>
                    <input type="checkbox" id="capacities:1">
                    <label for="capacities:1">1 </label>
                  </p> 
                  <p>
                    <input type="checkbox" id="capacities:1.7">
                    <label for="capacities:1.7">1.7 </label>
                  </p> 
                  <p>
                    <input type="checkbox" id="capacities:20">
                    <label for="capacities:20">20 </label>
                  </p> 
            </div>
          </div>
          <div class="tab">
            <input id="tab-zseven" type="checkbox" name="tabs">
            <label for="tab-zseven"></label>
            <div class="tab-content">  
                  <p>
                    <input type="checkbox" id="dimensions:17.78x5.08x2.54">
                    <label for="dimensions:17.78x5.08x2.54">17.78x5.08x2.54 <span class="lowercase"></span></label>
                  </p> 
            </div>
          </div>
          <div class="tab">
            <input id="tab-zeight" type="checkbox" name="tabs">
            <label for="tab-zeight"></label>
            <div class="tab-content">  
                  <p>
                    <input type="checkbox" id="price_range:115.00">
                    <label for="price_range:115.00">115.00 GBP</label>
                  </p> 
                  <p>
                    <input type="checkbox" id="price_range:15.00">
                    <label for="price_range:15.00">15.00 GBP</label>
                  </p> 
                  <p>
                    <input type="checkbox" id="price_range:59.99">
                    <label for="price_range:59.99">59.99 GBP</label>
                  </p> 
                  <p>
                    <input type="checkbox" id="price_range:97.79">
                    <label for="price_range:97.79">97.79 GBP</label>
                  </p> 
            </div>
          </div>
  </div>
  <div id="filters_div" style="font-size:0.5em;width: 850px;"><div class="tab"><input id="tab-one" type="checkbox" name="tabs"><label for="tab-one">product category</label><div class="tab-content"><p><input type="checkbox" id="product_category:kitchen equipment"><label for="product_category:kitchen equipment">kitchen equipment</label></p></div></div><div class="tab"><input id="tab-two" type="checkbox" name="tabs"><label for="tab-two">sub category</label><div class="tab-content"><p><input type="checkbox" id="sub_category:pedal bins"><label for="sub_category:pedal bins">pedal bins</label></p><p><input type="checkbox" id="sub_category:utensils"><label for="sub_category:utensils">utensils</label></p><p><input type="checkbox" id="sub_category:kettles"><label for="sub_category:kettles">kettles</label></p><p><input type="checkbox" id="sub_category:tea makers"><label for="sub_category:tea makers">tea makers</label></p></div></div><div class="tab"><input id="tab-three" type="checkbox" name="tabs"><label for="tab-three">Brands</label><div class="tab-content"><p><input type="checkbox" id="brand_name:brabantia"><label for="brand_name:brabantia">brabantia</label></p><p><input type="checkbox" id="brand_name:goodgrips"><label for="brand_name:goodgrips">goodgrips</label></p><p><input type="checkbox" id="brand_name:kenwood"><label for="brand_name:kenwood">kenwood</label></p></div></div><div class="tab">  <input id="tab-four" type="checkbox" name="tabs"><label for="tab-four">colours</label><div class="tab-content"><p><input type="checkbox" id="colours:red black and silver"><label for="colours:red black and silver">red black and silver</label></p><p><input type="checkbox" id="colours:stainless steel"><label for="colours:stainless steel">stainless steel</label></p><p><input type="checkbox" id="colours:stainless steel &amp; black"><label for="colours:stainless steel &amp; black">stainless steel &amp; black</label></p></div></div></div>

  <div id="shopping_index" class="four"><div class="image_tab"><table><tbody><tr><td class="product_image"><a href="https://demo.mydomain.com/cgi-bin/catalogue_detail/594/Garlic%20Press"><img class="galleryThumbnail" src="./page_files/mask.pl(1).download" rel="lightbox[453]" title="Garlic Press - red black and silver"></a></td></tr><tr><td><h2><a href="https://demo.mydomain.com/cgi-bin/catalogue_detail/594/Garlic%20Press">goodgrips</a></h2></td></tr><tr><td class="price"><div class="price_data"><p>Garlic Press</p><p>red black and silver()</p><p>in stock</p><p>£&nbsp;15.00</p></div></td></tr></tbody></table></div><div class="image_tab"><table><tbody><tr><td class="product_image"><a href="https://demo.mydomain.com/cgi-bin/catalogue_detail/593/Stainless%20steel%20pedal%20bin%2020%20litre"><img class="galleryThumbnail" src="./page_files/mask.pl(2).download" rel="lightbox[452]" title="Stainless steel pedal bin 20 litre - stainless steel"></a></td></tr><tr><td><h2><a href="https://demo.mydomain.com/cgi-bin/catalogue_detail/593/Stainless%20steel%20pedal%20bin%2020%20litre">brabantia</a></h2></td></tr><tr><td class="price"><div class="price_data"><p>Stainless steel pedal bin</p><p>stainless steel()</p><p>in stock</p><p>£&nbsp;97.79</p></div></td></tr></tbody></table></div><div class="image_tab"><table><tbody><tr><td class="product_image"><a href="https://demo.mydomain.com/cgi-bin/catalogue_detail/589/Persona%20kettle"><img class="galleryThumbnail" src="./page_files/mask.pl(3).download" rel="lightbox[449]" title="Persona kettle - Stainless steel"></a></td></tr><tr><td><h2><a href="https://demo.mydomain.com/cgi-bin/catalogue_detail/589/Persona%20kettle">kenwood</a></h2></td></tr><tr><td class="price"><div class="price_data"><p>Persona kettle</p><p>Stainless steel()</p><p>in stock</p><p>£&nbsp;59.99</p></div></td></tr></tbody></table></div><div class="image_tab"><table><tbody><tr><td class="product_image"><a href="https://demo.mydomain.com/cgi-bin/catalogue_detail/591/Tea%20maker"><img class="galleryThumbnail" src="./page_files/mask.pl(4).download" rel="lightbox[450]" title="Tea maker - stainless steel &amp; black"></a></td></tr><tr><td><h2><a href="https://demo.mydomain.com/cgi-bin/catalogue_detail/591/Tea%20maker">kenwood</a></h2></td></tr><tr><td class="price"><div class="price_data"><p>Tea maker</p><p>stainless steel &amp; black()</p><p>last few remaining</p><p>£&nbsp;115.00</p></div></td></tr></tbody></table></div><div class="image_tab"></div></div>
  <div id="debug" style="float:none;width: 500px;"></div>
    <script src="./page_files/jquery-latest.js"></script> 
    <script>


   
$('head').append("<style>.tab { position: relative; margin-bottom: 0; width: 100%; color: #fff;}.tab input { position: absolute; opacity: 0; z-index: -1;}.tab label { position: relative; display: block;padding: 0 0 0 10px;background: #717074;font-weight: bold;line-height: 1.5em; cursor: pointer;} .tab-content { max-height: 0; width: 100%;overflow: hidden; font-size: 0.7em;background: inherit; -webkit-transition: max-height .50s; -o-transition: max-height .50s; transition: max-height .50s;}.tab-content label{background-color: #fff;margin:0;padding:0;border:0;color: #717074;}.tab-content p {  clear:left;  display:block;  text-align:left; margin: 0;   border: 1px solid #1b1b1b; border-left: 0;  border-right:0;  border-top:0;}.tab input:checked ~ .tab-content { max-height: 200vh;}.tab label::after {  position: absolute;  right: 0;  top: 0;  display: inline-block;  vertical-align:middle;  -webkit-transition: all 1.35s;  -o-transition: all 1.35s;  transition: all 1.35s;}.tab input[type=checkbox] + label::after {  content: '+';  display:none;}.tab input[type=radio] + label::after { content: '\25BC';}.tab input[type=checkbox]:checked + label::after { transform: rotate(315deg); }.tab input[type=radio]:checked + label::after { transform: rotateX(180deg);}.lowercase{text-transform:lowercase;}.tab-content input{  position: initial;  display:none; opacity: 0; z-index:initial;  margin: 1em;}.tab-content label{  display: block; line-height: 1.5em;}.tab-content input[type=checkbox] + label::after{ display:none; content:'';}.tab-content input[type=checkbox] + label::before{  content: '\2713' !important;  color: #dad8da;  margin-right: 10px; -webkit-transition: all .75s;  -o-transition: all .75s;  transition: all .75s;}.tab-content input[type=checkbox]:checked + label::before {  content: '\2713'; transform: none;  color: green; font-weight: 700;}}</style>");


   





    debug = true;
    function handleDebug(debugInfo)
    {
    $("#debug").html("" + debugInfo + "");
    }


    function makeTable(data)
    {
    var tbl_body = "";
    
    



        $.each(data, function(k, v) 
        {
        var row = "",
        currRecord = this;


           // if( k === "debug" )
           // {
           //
           //     if( debug === true )
           //     {
           //     //handleDebug(v);
           //     }
           // return;
           // }





            $.each(this, function(k , v) 
            {
              
                if( k === 'product_name' )
                {

                /* trim the product name to be just 'length' characters */
                var string = currRecord['product_name'];
                var length = 25;
                var trimmedString = (string.substring(0, length));



                v =  "<table><tr><td class='product_image'>"
                     + "<a href='/cgi-bin/catalogue_detail/" 
                     + currRecord['stock_data_id'] 
                     + "/"
                     + currRecord['product_name'] 
                     + "'>"
                     + "<img class='galleryThumbnail' src='/cgi-bin/mask.pl?client=" 
                     + currRecord['business_id'] 
                     + "&size=small-size&img=" 
                     + currRecord['image_name'] 
                     + "' rel='lightbox[" 
                     + currRecord['product_id'] 
                     + "]' title='" 
                     + currRecord['product_name'] 
                     + " - "
                     + currRecord['colour']
                     + "' /></a>"
                     + "</td></tr><tr><td>"
                     + "<h2>"
                     + "<a href='/cgi-bin/catalogue_detail/" 
                     + currRecord['stock_data_id'] 
                     + "/"
                     + currRecord['product_name'] 
                     + "'>" 
                     + currRecord['brand_name'] 
                     + "</a></h2></td></tr><tr><td class='price'>"
                     + "<div class='price_data'>"
                     + "<p>" + trimmedString + "</p>"
         
                     + "<p>" + currRecord['colour'] + "(" + currRecord['size'] + ")</p>"
                     + "<p>"  + currRecord['stock_availability'] + "</p>"
                     + "<p>"  + currRecord['currency_symbol_left'] + "&nbsp;" + currRecord['price'] + "</p>"
                     + "</div></td></tr></table>";
                row += ""+v+ "";
                }
                else if ( k === 'size' )
                {
                //v = "<div>" + v + "</div>";  
                //row += "<p>"+v+"</p>";
                }
                else if ( k === '' )
                {
                //row += "<h1>sorry no results here</h1>";
                }
                else
                {

                } 

         
            })
 


            tbl_body += "<div class='image_tab'>"+row+"</div>";
        })

    
    
    return tbl_body;
    }
 
 



    function getCatalogueFilterOptions()
    {
    var opts = [];
   

        $checkboxes.each(function()
        {
            if(this.checked)
            {
            opts.push(this.id);
            }
        });
 
    return opts;
    }
 


    function updateCatalogue(opts)
    {
 
        $.ajax(
        {
        type: "POST",
        url: "/php-queries/product-catalogue-query.php",
        
        dataType : 'json',
        cache: false,
        data: {filterOpts: opts},
          success: function(records)
          {
          //alert('SUCCESS!');
          // alert(records);
           $('#shopping_index').html(makeTable(records));
          },

               

        });
    }
    




    function makeFilter(data)
    {
    var dataset="";
    var product_data = [];
    var product_data1=[]; 
  
    var available_departments = [];
    var restricted_departments = [];
    var available_categories = [];
    var restricted_categories = [];

    var available_sub_categories = [];
    var restricted_sub_categories = [];

    var available_brand_names = [];
    var restricted_brand_names = [];
    var available_colours = [];
    var restricted_colours = [];



        $.each(data, function(k, v) 
        {
        var row = "",
        currRecord= this;
        var dataString = '';
              
          //if( k === "debug" )
          //{
          //
          //     if( debug === true )
          //     {
          //     handleDebug(v);
          //     }
          // //return;
          // }

            $.each(this, function(k , v) 
            {
            var department = currRecord['product_department'];
            var cat = currRecord['category'];
            var sub_cat = currRecord['sub_category'];
            var brand = currRecord['brand_name'];
            var colour = currRecord['colour'];


            // product_data1.push({category:
            //  + "\"" 
            //  + currRecord['category'] 
            //  + "\"" 
            //  + ", sub_category :" 
            //  + "\""
            //  + currRecord['sub_category']
            //  + "\"" 
            //  + ", colour: "
            //  + "\"" 
            //  + currRecord['colour']
            //  + "\"" 
            //  + ", product_size: "
            //  + "\"" 
            //  + currRecord['size']
            //  + "\"" 
            //  + "}"
            //  );


            //var obj = product_data.find(o => o.category === cat and o => o.sub_category === sub_cat and o => o.colour === color );
            //if ( ! (obj))
           // {
            product_data.push({category: cat, sub_category: currRecord['sub_category'], colour: currRecord['colour']} );
           // }

            // build array of available_departments
            var obj = available_departments.find( o => o.product_department === department );
            if ( !( obj ) )
            {
            available_departments.push({product_department: department } );
            }



            // build array of available categories
            var obj = available_categories.find(o => o.product_category === cat );
            if ( !(obj) )
            {
            available_categories.push({product_category: cat });
            }

            // build array of available_sub_categories
            var obj = available_sub_categories.find(o => o.sub_category === sub_cat );
            if ( !(obj) )
            {
            available_sub_categories.push({sub_category: sub_cat });
            }


            // build and array of available brand names
            var obj = available_brand_names.find(o => o.brand_name == brand );
            if ( !(obj) )
            {
            available_brand_names.push({brand_name:brand});
            }


            // build array of available_colours
            obj = available_colours.find(o => o.colours === colour );
            if ( !(obj) )
            {
            available_colours.push({colours: colour });
            }




              
            
            })
    
        })

 

  // sort the brand_names alphabetically
   var sorted_brand_names = available_brand_names.sort(function(a, b)
  { // sort object by brand_name

	var colourA=a.brand_name, colourB=b.brand_name
	if (colourA < colourB) //sort string ascending
 		return -1 
	if (colourA > colourB)
		return 1
	return 0 //default return value (no sorting)
  })



  // sort the array avalable_colours alphabetically
  
   var sac= available_colours.sort(function(a, b)
  { // sort object by colour

	var colourA=a.colours, colourB=b.colours
	if (colourA < colourB) //sort string ascending
 		return -1 
	if (colourA > colourB)
		return 1
	return 0 //default return value (no sorting)
  })
  

 
console.log(available_categories);
//console.log(available_sub_categories);
//console.log(available_colours);


//////////////////////////////////////////////////////
// output the html for the nav filter
//////////////////////////////////////////////////////
//   if ( available_departments )
//   {
//  dataset = "<div class='tab'>"
//           + "  <input id='tab-zzero' type='checkbox' name='tabs'>" 
//           + "  <label for='tab-zzero'>Product Department</label>" 
//           + "  <div class='tab-content'>"  
//           + "    <p>"
//           + "      <input type='checkbox' id='product_department:home & garden'  />"
//           + "      <label for='product_department:home & garden'>home & garden</label>"
//           + "    </p>"
//           + "  </div>"
//           + "</div>";
//  }


  if ( available_categories )
  {
  dataset += "<div class=\"tab\">"
           + "<input id=\"tab-one\" type=\"checkbox\" name=\"tabs\" />" 
           + "<label for=\"tab-one\">product category</label>" 
           + "<div class=\"tab-content\">";

  // loop through the array to output more data
  $.each(available_categories, function(k , v) 
  {

      $.each(this, function(k , v) 
      {
      dataset += "<p>" 
               + "<input type=\"checkbox\" id=\"product_category:"+v+"\" />"+"<label for=\"product_category:"+v+"\">"+v+"</label>"+"</p>";
      })
  })
  dataset += "</div></div>";
  }







  if ( available_sub_categories )
  {
  dataset += "<div class=\"tab\">"
           + "<input id=\"tab-two\" type=\"checkbox\" name=\"tabs\" />"+"<label for=\"tab-two\">sub category</label>"+"<div class=\"tab-content\">";

  //loop through the array to output more data
  $.each(available_sub_categories, function(k , v) 
  {

      $.each(this, function(k , v) 
      {
      dataset += "<p>"
               + "<input type=\"checkbox\" id=\"sub_category:"+v+"\" />"+"<label for=\"sub_category:"+v+"\">"+v+"</label>"+"</p>";
      })
  })
  dataset += "</div></div>";
  }





  if ( available_brand_names )
  {
  dataset += "<div class=\"tab\">"
           + "<input id=\"tab-three\" type=\"checkbox\" name=\"tabs\" />" 
           + "<label for=\"tab-three\">Brands</label>" 
           + "<div class=\"tab-content\">";

  // loop through the array to output more data
  $.each( sorted_brand_names, function(k , v) 
  {

      $.each(this, function(k , v) 
      {
      dataset += "<p>" 
               + "<input type=\"checkbox\" id=\"brand_name:"+v+"\" />"+"<label for=\"brand_name:"+v+"\">"+v+"</label>"+"</p>";
      })
  })
  dataset += "</div></div>";


  }


//console.log(available_colours);

  if ( available_colours )
  {
  dataset += "<div class=\"tab\">"
           + "  <input id=\"tab-four\" type=\"checkbox\" name=\"tabs\" />"+"<label for=\"tab-four\">colours</label>"+"<div class=\"tab-content\">";

  

  

  
  //loop through the array to output more data
  $.each(sac, function(k , v) 
  {
  
      
      $.each(this, function(k , v) 
      {

      dataset += "<p>"
               + "<input type=\"checkbox\" id=\"colours:"+v+"\" />"+"<label for=\"colours:"+v+"\">"+v+"</label>"+"</p>";
         
      })
  })
  dataset += "</div></div>";
  }



//console.log(sac);
//console.log(dataset);


//var parts='';

// additional row insert to the array product_data
product_data.push({category: 'Kitchen Utensils', sub_category: 'Knives', colour: 'Blue', size: 6});

 


// function showthis(elem){
// for(i=0; i<product_data.length; i++){
//	parts  += product_data[i][elem] + ', ';
// }
// alert (parts);
// document.getElementById('filters_div').innerHTML = parts.slice(0, - 2);
// }
// showthis('sub_category');  //Change this for each element you want to show
// document.write( "<div style='width:100%;background:#ccc;'>" + dataset + "</div>");
return dataset;
}



   






    function update_nav_filter(opts)
    {
 
        $.ajax(
        {
        type: "POST",
        url: "/php-queries/product-filter-query.php",
        
        dataType : 'json',
        cache: false,
        data: {filterOpts: opts},
          success: function(records)
          {
          //console.log(records);
          //alert('SUCCESS!');
          // alert(records);
          $('#filters_div').html(makeFilter(records));
          },

          // failure: function()
          // {
          // alert('NO RESULTS'); 
          // }    


         

        });
    }








    function subsidyIsValid()
    {
    var amount1 = $("#amount1").val(),
    amount2 = $("#amount2").val(),
    regex = /^\d+$/,
    inputValid = false;

        if(regex.test(amount1) && regex.test(amount2))
        {
        var newTotal = Number(amount1) + Number(amount2)
        
        $("#total").text(newTotal);
        inputValid = true;
        }

    return inputValid
    }





    function updatePrices()
    {
    var subsidyTotal = Number($("#total").text());

        $(".price").each(function()
        {
        var origVal = Number($(this).text())
        $(this).text(origVal - subsidyTotal)
        })
    }




    var $checkboxes = $("input:checkbox");
    $checkboxes.on("change", function()
    {
    var opts = getCatalogueFilterOptions();
    updateCatalogue(opts);
    update_nav_filter(opts);
    });
    





  
    $("#apply").on("click", function()
    {
    
         if(subsidyIsValid())
         {
         $(this).prop("disabled", true);
         $(this).next().prop("disabled", false);
         updatePrices();
         }
         else 
         {
         alert("Subsidy invalid!")
         }
    });




    $("#remove").on("click", function()
    {
    $("#amount1").val("");
    $("#amount2").val("");
    $("#total").text("0");
    $(this).prop("disabled", true);
    $(this).prev().prop("disabled", false);
    $checkboxes.trigger("change");
    });



    $checkboxes.trigger("change");
    updatePrices();
    </script>
<style>
#filtering_div, #filters_div{
  width: 300px; /* !important;*/
  text-transform: capitalize;
  margin:0 auto !important;
  font-size: 1em !important;
  text-transform:capitalize;
}
#filtering_div h1, #filters_div h1{
  font-size: 1em;
}
#shopping_index{
clear:left;
}
/* Acordeon styles */
.tab {
  position: relative;
  margin-bottom: 0;
  width: 100%;
  color: #fff;
}
.tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tab label {
  position: relative;
  display: block;
  padding: 0 0 0 10px; /* 0 0 1em;*/
  background: #717074; /*#16a085;*/
  font-weight: bold;
  line-height: 1.5em;
  cursor: pointer;
}
.blue label {
  background: #2980b9;
}
.tab-content {
  max-height: 0;
  width: 100%;
  overflow: hidden;
  font-size: 0.7em;
  background: inherit; 
  -webkit-transition: max-height .50s;
  -o-transition: max-height .50s;
  transition: max-height .50s;
}
.blue .tab-content {
  background: #3498db;
}
.tab-content label{
  background-color: #fff;
  margin:0;
  padding:0;
  border:0;
  color: #717074;
}
.tab-content p {
  clear:left;
  display:block;
  text-align:left;
  margin: 0; /*1em;*/
  border: 1px solid #1b1b1b;
  border-left: 0;
  border-right:0;
  border-top:0;
}
/* :checked */
.tab input:checked ~ .tab-content {
  max-height: 200vh;
}


/* Icon */

.tab label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: inline-block;
  vertical-align:middle;
  -webkit-transition: all 1.35s;
  -o-transition: all 1.35s;
  transition: all 1.35s;
  
}

.tab input[type=checkbox] + label::after {
  content: "+";
  display:none;
}
.tab input[type=radio] + label::after {
  content: "\25BC";
}
.tab input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}
.tab input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}


/*  my mods */
.lowercase{
text-transform:lowercase;
}
.tab-content input{
  position: initial;
  display:none;
  opacity: 0;
  z-index:initial;
  margin: 1em;
}
.tab-content label{
  display: block;
  line-height: 1.5em;
}
.tab-content input[type=checkbox] + label::after{
  display:none;
  content:'';
}

.tab-content input[type=checkbox] + label::before{
  content: '\2713' !important;
  color: #dad8da;
  margin-right: 10px;
  -webkit-transition: all .75s;
  -o-transition: all .75s;
  transition: all .75s;
}

.tab-content input[type=checkbox]:checked + label::before {
  content: "\2713";
  transform: none;
  color: green; /*#a31e22;*/
  font-weight: 700;
}


/* end of my mods*/
</style>
 
 
 
 
 
 
 
 
 
 
<!-- end of main content div -->
</div>

You have spaces in your ids which is invalid so these two will never match.


        <input type="checkbox" id="product_category:kitchen equipment">
        <label for="product_category:kitchen equipment">kitchen equipment</label>

Change those so there are no spaces in the id and for attributes.

e.g.

        <input type="checkbox" id="product_category:kitchen_equipment">
        <label for="product_category:kitchen_equipment">kitchen equipment</label>

OK, I have adjusted the coding so that it is valid. (long time since I’ve had a validation issue :frowning: )

In the page, the visual is working better however, the js seems not to be firing off to the php script which queries they Db.
Only the HTML coded parameter (home_&_garden) is firing off.

This means that, as each item in a section is selected, then, instead of reducing the options, the whole range of options remains.

Let’s say I select the colour ‘Stainless Steel’ …only the Category, Sub Category and Brand that have items in that colour should be shown. And in the div #shopping_index, only Stainless Steel items should be shown.

I must be missing something, (i.e. not seeing it), in the JS.

Please try to give me a pointer

Bazz

I think this code may be wrong.
It works when the filtering accordion is in the html but it seems, not, when it is JS generated.

function getCatalogueFilterOptions()
    {
    var opts = [];
    alert('this function is running');  // nothing happens when I check a checkbox.

        $checkboxes.each(function()
        {
            if(this.checked)
            {
            opts.push(this.id);
console.log(opts);  only the html generated option is displayed (home_&_garden)
            }
        });
 
    return opts;
    }

That is triggered (or supposed to be triggered) by this code


 var $checkboxes = $("input:checkbox");
    $checkboxes.on("change", function()
    {
    var opts = getCatalogueFilterOptions();
    updateCatalogue(opts);
    update_nav_filter(opts);
    });

    $checkboxes.trigger("change");

Bazz

Looking at this some more and the following code doesn’t put up the alert box.


    var \$checkboxes = \$("input:checkbox");
    \$checkboxes.on("change", function()
    {
    alert('there is a change is checkbox status');
    var opts = getCatalogueFilterOptions();
    updateCatalogue(opts);
    update_nav_filter(opts);
    });

Sorry I’m out for the evening now but will take a look in the morning unless someone else wants to jump in:)

No problem, Paul.

I’ll try to work out some thing tonight.

I have run the filtering accordion in the html as well as in JS. I shall refer to one as the html version and the other as the JS version.

Things I noticed and which may help narrow down the cause/issues …

When clicking on the html version, only the tab-numbers are submitted - according to the browser console.
When clicking on the js version, the correct drop down shows, but within the html version’s tabs.

The selection of items from within that dropdown is correct for the shopping catalogue with the restriction working to reduce the number of products to be shown.

The selection of items from within that dropdown does not work properly for the adjustment of the accordion options. But the accordion stays open as it should and the arrow turns green as it should on selection of an item.

If I remove the html version, the accordion stays open and the arrows turn green but no data is fed through ajax, which means the product catalogue doesn’t change from default listings and the accordion doesn’t adjust to reflect the selections made.

Summary:
It seems to me that for some reason the JS isn’t submitting the ajax request.

I hope that helps narrow down the focus of where I should be looking.

Bazz

Could it be a binding issue?

The page loads and runs JS but we need to run JS each time there’s a status change with the checkboxes.
Does that mean we need to ‘bind’ the event handler?

If so, I wonder should the following ‘myClickableElement’ be the class of the checkboxes? Could it be “input:checkbox” to connect with all checkboxes?

Edited: here’s the full code relating to triggering of the ajax.


<script>
    var \$checkboxes = \$("input:checkbox");

    \$checkboxes.on("change", function()
    {
    //alert('there is a change is checkbox status');
    var opts = getCatalogueFilterOptions();
    updateCatalogue(opts);
    update_nav_filter(opts);
    });


</script>


<script>
   \$checkboxes.trigger("change");
</script>

And here’s the new bit I am trying which as yet isn’t working.
Lots to learn with JS, I think.


<script>
// new bit  
\$(document).ready(function(){
    // bind event handlers when the page loads.
    bindButtonClick();
});

function bindButtonClick(){
    \$(.myClickableElement).click(function(){
        \$checkboxes.trigger("change");
    });
}
// end of new bit
</script>

Any assistance would be greatly received.
Bazz

This is getting out of my area of knowledge but if you are dynamically adding more checkboxes to your page via ajax then as soon as you do that you will need to update the $checkboxes variable as it points to a collection that has now been changed.

Hopefully one of the JS experts (@James_Hibbard @Paul_Wilkins et al ) will drop by soon but I think they will need a more coherent demo to work from. :slight_smile:

Thanks Paul.

I’m not sure where the incohrence lies but here is the complete code broken down into HTML JS & CSS.
I hope someone can assist. If it may make a difference, I don’t expect help for free.

HTML first.

 <h1>home & garden</h1>
  <div id="filtering_div" style='display:none'>
          <div class="tab">
           <input id="tab-zero" type="checkbox" name="tabs" />
           <label for="tab-zero"></label> 
              <div class="tab-content">  
                <p>
                  <input type="checkbox" id="product_department:home_&_garden" checked=checked />
                  <label for="product_department:home_&_garden">home & garden</label>
                </p>
              </div>
          </div>

 </div>
  <div id='filters_div' style='font-size:0.5em;width: 850px;'>
</div>

  <div id="shopping_index" class='four'>  </div>
  <div id="debug" style='float:none;clear:left;width: 100%;'></div>

Next, the JS

    <script src="https://code.jquery.com/jquery-latest.js"></script> 
    <script>

$('head').append("<style>.tab { position: relative; margin-bottom: 0; width: 100%; color: #fff;}.tab input { position: absolute; opacity: 0; z-index: -1;}.tab label { position: relative; display: block;padding: 0 0 0 10px;background: #717074;font-weight: bold;line-height: 1.5em; cursor: pointer;} .tab-content { max-height: 0; width: 100%;overflow: hidden; font-size: 0.7em;background: inherit; -webkit-transition: max-height .50s; -o-transition: max-height .50s; transition: max-height .50s;}.tab-content label{background-color: #fff;margin:0;padding:0;border:0;color: #717074;}.tab-content p {  clear:left;  display:block;  text-align:left; margin: 0;   border: 1px solid #1b1b1b; border-left: 0;  border-right:0;  border-top:0;}.tab input:checked ~ .tab-content { max-height: 200vh;}.tab label::after {  position: absolute;  right: 0;  top: 0;  display: inline-block;  vertical-align:middle;  -webkit-transition: all 1.35s;  -o-transition: all 1.35s;  transition: all 1.35s;}.tab input[type=checkbox] + label::after {  content: '+';  display:none;}.tab input[type=radio] + label::after { content: '\25BC';}.tab input[type=checkbox]:checked + label::after { transform: rotate(315deg); }.tab input[type=radio]:checked + label::after { transform: rotateX(180deg);}.lowercase{text-transform:lowercase;}.tab-content input{  position: initial;  display:none; opacity: 0; z-index:initial;  margin: 1em;}.tab-content label{  display: block; line-height: 1.5em;}.tab-content input[type=checkbox] + label::after{ display:none; content:'';}.tab-content input[type=checkbox] + label::before{  content: '\2713' !important;  color: #dad8da;  margin-right: 10px; -webkit-transition: all .75s;  -o-transition: all .75s;  transition: all .75s;}.tab-content input[type=checkbox]:checked + label::before {  content: '\2713'; transform: none;  color: green; font-weight: 700;}}</style>");


   




    // debug = true;
    function handleDebug(debugInfo)
    {
    $("#debug").html("" + debugInfo + "");
    }


    function makeTable(data)
    {
    var tbl_body = "";
    
    



        $.each(data, function(k, v) 
        {
        var row = "",
        currRecord = this;


           // if( k === "debug" )
           // {
           //
           //     if( debug === true )
           //     {
           //     handleDebug(v);
           //     }
             // return;
           // }





            $.each(this, function(k , v) 
            {
             
                if( k === 'product_name' )
                {

                /* trim the product name to be just 'length' characters */
                var string = currRecord['product_name'];
                var length = 25;
                var trimmedString = (string.substring(0, length));



                v =  "<table><tr><td class='product_image'>"
                     + "<a href='/cgi-bin/catalogue_detail/" 
                     + currRecord['stock_data_id'] 
                     + "/"
                     + currRecord['product_name'] 
                     + "'>"
                     + "<img class='galleryThumbnail' src='/cgi-bin/mask.pl?client=" 
                     + currRecord['business_id'] 
                     + "&size=small-size&img=" 
                     + currRecord['image_name'] 
                     + "' rel='lightbox[" 
                     + currRecord['product_id'] 
                     + "]' title='" 
                     + currRecord['product_name'] 
                     + " - "
                     + currRecord['colour']
                     + "' /></a>"
                     + "</td></tr><tr><td>"
                     + "<h2>"
                     + "<a href='/cgi-bin/catalogue_detail/" 
                     + currRecord['stock_data_id'] 
                     + "/"
                     + currRecord['product_name'] 
                     + "'>" 
                     + currRecord['brand_name'] 
                     + "</a></h2></td></tr><tr><td class='price'>"
                     + "<div class='price_data'>"
                     + "<p>" + trimmedString + "</p>"
         
                     + "<p>" + currRecord['colour'] + "(" + currRecord['size'] + ")</p>"
                     + "<p>"  + currRecord['stock_availability'] + "</p>"
                     + "<p>"  + currRecord['currency_symbol_left'] + "&nbsp;" + currRecord['price'] + "</p>"
                     + "</div></td></tr></table>";
                row += ""+v+ "";
                }
                else if ( k === 'size' )
                {
                //v = "<div>" + v + "</div>";  
                //row += "<p>"+v+"</p>";
                }
                else if ( k === '' )
                {
                //row += "<h1>sorry no results here</h1>";
                }
                else
                {

                } 

         
            })
 


            tbl_body += "<div class='image_tab'>"+row+"</div>";
        })

    
    
    return tbl_body;
    }
 
 



    function getCatalogueFilterOptions()
    {
    var opts = [];
   
       // alert('this function is running');  // nothing happens when I check a checkbox.

        $checkboxes.each(function()
        {

            if(this.checked)
            {
            opts.push(this.id);
console.log(opts);
            }
        });
 


    return opts;
    }
 


    function updateCatalogue(opts)
    {
 
        $.ajax(
        {
        type: "POST",
        url: "/php-queries/product-catalogue-query.php",
        
        dataType : 'json',
        cache: false,
        data: {filterOpts: opts},
          success: function(records)
          {
          //alert('SUCCESS!');
          // alert(records);
           $('#shopping_index').html(makeTable(records));
          },

               

        });
    }
    




    function makeFilter(data)
    {
    var dataset="";
    var product_data = [];
    var product_data1=[]; 
  
    var available_departments = [];
    var restricted_departments = [];
    var available_categories = [];
    var restricted_categories = [];

    var available_sub_categories = [];
    var restricted_sub_categories = [];

    var available_brand_names = [];
    var restricted_brand_names = [];
    var available_colours = [];
    var restricted_colours = [];



        $.each(data, function(k, v) 
        {
        var row = "",
        currRecord= this;
        var dataString = '';
              
        //    if( k === "debug" )
        //    {
        //  
        //        if( debug === true )
        //        {
        //        handleDebug(v);
        //        }
        //       //return;
        //    }

            $.each(this, function(k , v) 
            {
            var department = currRecord['product_department'];
            var cat = currRecord['category'];
            var sub_cat = currRecord['sub_category'];
            var brand = currRecord['brand_name'];
            var colour = currRecord['colour'];

             
            // build array of available_departments
            var obj = available_departments.find( o => o.product_department === department );
            if ( !( obj ) )
            {
            available_departments.push({product_department: department } );
            }


            // build array of available categories
            var obj = available_categories.find(o => o.product_category === cat );
            if ( !(obj) )
            {
            available_categories.push({product_category: cat });
            }

            // build array of available_sub_categories
            var obj = available_sub_categories.find(o => o.sub_category === sub_cat );
            if ( !(obj) )
            {
            available_sub_categories.push({sub_category: sub_cat });
            }


            // build and array of available brand names
            var obj = available_brand_names.find(o => o.brand_name == brand );
            if ( !(obj) )
            {
            available_brand_names.push({brand_name:brand});
            }


            // build array of available_colours
            obj = available_colours.find(o => o.colours === colour );
            if ( !(obj) )
            {
            available_colours.push({colours: colour });
            }

           
            
            })
            
        })

 

  // sort the brand_names alphabetically
   var sorted_brand_names = available_brand_names.sort(function(a, b)
  { // sort object by brand_name

	var colourA=a.brand_name, colourB=b.brand_name
	if (colourA < colourB) //sort string ascending
 		return -1 
	if (colourA > colourB)
		return 1
	return 0 //default return value (no sorting)
  })



  // sort the array avalable_colours alphabetically
  
   var sac= available_colours.sort(function(a, b)
  { // sort object by colour

	var colourA=a.colours, colourB=b.colours
	if (colourA < colourB) //sort string ascending
 		return -1 
	if (colourA > colourB)
		return 1
	return 0 //default return value (no sorting)
  })
  

 
//console.log(available_categories);
//console.log(available_sub_categories);
//console.log(available_colours);


//////////////////////////////////////////////////////
// build the output the nav filter
//////////////////////////////////////////////////////
//   if ( available_departments )
//   {
//  dataset = "<div class='tab'>"
//           + "  <input id='tab-zzero' type='checkbox' name='tabs'>" 
//           + "  <label for='tab-zzero'>Product Department</label>" 
//           + "  <div class='tab-content'>"  
//           + "    <p>"
//           + "      <input type='checkbox' id='product_department:home_&_garden'  />"
//           + "      <label for='product_department:home_&_garden'>home_&_garden</label>"
//           + "    </p>"
//           + "  </div>"
//           + "</div>";
//  }


  if ( available_categories )
  {
  dataset += "<div class=\"tab\">"
           + "<input id=\"tab-one\" type=\"checkbox\" name=\"tabs\" />" 
           + "<label for=\"tab-one\">product category</label>" 
           + "<div class=\"tab-content\">";

  // loop through the array to output more data
  $.each(available_categories, function(k , v) 
  {

      $.each(this, function(k , v) 
      {
      if ( v ) {
      var underscored_v = v.replace(/ /g, "_");
      }

      dataset += "<p>" 
               + "<input type=\"checkbox\" id=\"product_category:"+underscored_v+"\" />"+"<label for=\"product_category:"+underscored_v+"\">"+v+"</label>"+"</p>";
      })
  })
  dataset += "</div></div>";
  }






  if ( available_sub_categories )
  {
  dataset += "<div class=\"tab\">"
           + "<input id=\"tab-two\" type=\"checkbox\" name=\"tabs\" />"+"<label for=\"tab-two\">sub category</label>"+"<div class=\"tab-content\">";

  //loop through the array to output more data
  $.each(available_sub_categories, function(k , v) 
  {

      $.each(this, function(k , v) 
      {
          if ( v ) 
          {
          var underscored_v = v.replace(/ /g, "_");
          }

      dataset += "<p>"
               + "<input type=\"checkbox\" id=\"sub_category:"+underscored_v+"\" />"+"<label for=\"sub_category:"+underscored_v+"\">"+v+"</label>"+"</p>";
      })
  })
  dataset += "</div></div>";
  }







  if ( available_brand_names )
  {
  dataset += "<div class=\"tab\">"
           + "<input id=\"tab-three\" type=\"checkbox\" name=\"tabs\" />" 
           + "<label for=\"tab-three\">Brands</label>" 
           + "<div class=\"tab-content\">";

  // loop through the array to output more data
  $.each( sorted_brand_names, function(k , v) 
  {

      $.each(this, function(k , v) 
      {
          if ( v ) 
          {
          var underscored_v = v.replace(/ /g, "_");
          }

      dataset += "<p>" 
               + "<input type=\"checkbox\" id=\"brand_name:"+underscored_v+"\" />"+"<label for=\"brand_name:"+underscored_v+"\">"+v+"</label>"+"</p>";
      })
  })
  dataset += "</div></div>";


  }


//console.log(available_colours);

  if ( available_colours )
  {
  dataset += "<div class=\"tab\">"
           + "  <input id=\"tab-four\" type=\"checkbox\" name=\"tabs\" />"+"<label for=\"tab-four\">colours</label>"+"<div class=\"tab-content\">";

  

  

  
  //loop through the array to output more data
  $.each(sac, function(k , v) 
  {
  
      
      $.each(this, function(k , v) 
      {
          if ( v ) 
          {
          var underscored_v = v.replace(/ /g, "_");
          }

      dataset += "<p>"
               + "<input type=\"checkbox\" id=\"colours:"+underscored_v+"\" />"+"<label for=\"colours:"+underscored_v+"\">"+v+"</label>"+"</p>";
         
      })
  })
  dataset += "</div></div>";
  }


//console.log(dataset);
//console.log(sac);
//console.log(dataset);
return dataset;
}



   



var $checkboxes = $("input:checkbox");




    function update_nav_filter(opts)
    {
 
        $.ajax(
        {
        type: "POST",
        url: "/php-queries/product-filter-query.php",
        
        dataType : 'json',
        cache: false,
        data: {filterOpts: opts},
            success: function(records)
            {
            //console.log(records);
            //alert('SUCCESS!');
            // alert(records);
            $('#filters_div').html(makeFilter(records));
            }
   

        });
    }



    $checkboxes.on("change", function()
    {
    //alert('there is a change is checkbox status');  // working on page load but not when any checkbox is clicked-on 
    var opts = getCatalogueFilterOptions();
    updateCatalogue(opts);
    update_nav_filter(opts);
    });
    

    $checkboxes.trigger("change");


</script>

The CSS


<style>
#filtering_div, #filters_div{
  width: 100% !important;
  text-transform: capitalize;
  margin:0 auto !important;
  font-size: 1em !important;
  text-transform:capitalize;
}
#filters_div{
width: 300px !important;
}
#filtering_div h1, #filters_div h1{
  font-size: 1em;
}
#shopping_index{
clear:left;
}

/* Accordion styles */
.tab {
  position: relative;
  margin-bottom: 0;
  width: 100%;
  color: #fff;
}
.tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tab label {
  position: relative;
  display: block;
  padding: 0 0 0 10px; /* 0 0 1em;*/
  background: #717074; /*#16a085;*/
  font-weight: bold;
  line-height: 1.5em;
  cursor: pointer;
}

.tab-content {
  max-height: 0;
  width: 100%;
  overflow: hidden;
  font-size: 0.7em;
  background: inherit; 
  -webkit-transition: max-height .50s;
  -o-transition: max-height .50s;
  transition: max-height .50s;
}

.tab-content label{
  background-color: #fff;
  margin:0;
  padding:0;
  border:0;
  color: #717074;
}
.tab-content p {
  clear:left;
  display:block;
  text-align:left;
  margin: 0; /*1em;*/
  border: 1px solid #1b1b1b;
  border-left: 0;
  border-right:0;
  border-top:0;
}
/* :checked */
.tab input:checked ~ .tab-content {
  max-height: 200vh;
}


/* Icon */

.lowercase{
text-transform:lowercase;
}
.tab-content input{
  position: initial;
  display:none;
  opacity: 0;
  z-index:initial;
  margin: 1em;
}
.tab-content label{
  display: block;
  line-height: 1.5em;
}
.tab-content input[type=checkbox] + label::after{
  display:none;
  content:'';
}

.tab-content input[type=checkbox] + label::before{
  content: '\2713' !important;
  color: #dad8da;
  margin-right: 10px;
  -webkit-transition: all .75s;
  -o-transition: all .75s;
  transition: all .75s;
}

.tab-content input[type=checkbox]:checked + label::before {
  content: "\2713";
  transform: none;
  color: green; 
  font-weight: 700;
}

</style>
 

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.