Javascript to display/hide multiple classes based upon criteria set

Question

I have used some JS which hides certain fields based upon the type it has been set using a hidden ID which then hides the field and gives it a display="none".

The problem is that I used this on one single product details page and now need to do the same concept but in a dynamic results page which has multiple id's so I'm wanting to use the same concept here so, a snippet of the code I am using is below, any tweaks/better way of being able to adapt it to be reused for multiple items on one page based upon different id's (as the different types would show on the search results page) would be much appreciated!

JS I used is here:

else if (proptype.textContent == "3628") {   
        document.getElementById("spbeds").style.display = "none";
        document.getElementById("spbaths").style.display = "none";
        document.getElementById("spbuild").style.display = "none";
        document.getElementById("spterr").style.display = "none";
        document.getElementById("sppool").style.display = "none";
        document.getElementById("sp2beds").style.display = "none";
        document.getElementById("sp2baths").style.display = "none";
        document.getElementById("sp2build").style.display = "none";
        document.getElementById("sp2terr").style.display = "none";
        document.getElementById("sp2pool").style.display = "none";
    }

Which results to:

<div class="property-amenities hidden-sm hidden-xs clearfix">
                                    <span><strong>00RN4</strong>Reference</span>
                                    <span id="sp2beds" style="display: none;"><strong>0</strong>Bedrooms</span>
                                    <span id="sp2baths" style="display: none;"><strong>0</strong>Bathrooms</span>
                                    <span id="sp2build" style="display: none;"><strong>0m²</strong>Build</span>
                                    <span id="sp2terr" style="display: none;"><strong>0m²</strong>Terrace Size</span>
                                    <span id="sp2plot"><strong>0m²</strong>Plot</span>
                                    <span id="sp2pool" style="display: none;"><strong>No</strong>Pool</span>
                                    <span id="sp2zone"><strong>None </strong>Planning Zone</span>
                                    <span><strong>150.000€</strong>Price</span>
                                </div>

Give them all a class, then use document.getElementsByClassName or document.querySelectorAll to get a list; iterate through the list, setting the style you want. See stackoverflow.com/q/35458972/215552 — Heretic Monkey
– Heretic Monkey, Commented Oct 25, 2016 at 16:48
Thanks, however if I change the span to a class and not a id using document.getElementsByClassName it does not do a thing and would still not solve the issue I am having if the search results page if contains a id or multiple (this is what i use to show hide fields based upon this) it would then hide fields from another result when the result based upon a completely different id which could have completely different fields hidden and would hide fields on this which should be shown — user4952637
– user4952637, Commented Oct 26, 2016 at 10:30
How about you edit your question to include all of your requirements so that people aren't wasting their time? — Heretic Monkey
– Heretic Monkey, Commented Oct 26, 2016 at 14:13

Geeky · Accepted Answer · 2016-10-25 16:59:00Z

0

You can do something like this

check the following snippet

window.onload=function(){
 
  var parent=document.getElementsByClassName('parent');
  
var divs=parent[0].querySelectorAll('div');
divs.forEach(function(div){
  var id=div.getAttribute('id');
  document.getElementById(id).style.display="none";
});
}

<div class="parent"> 
  <div id="div1">div1</div>
  <span id="span1">span1</span>
  
  <div id="div2">div2</div>
  <span id="span2">span2</span>
  
  <div id="div3">div3</div>
  <span id="span3">span3</span>
  
  <div id="div4">div4</div>
  <span id="span4">span4</span>
</div>

Hope it helps

answered Oct 25, 2016 at 16:59

Geeky

7,5142 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user4952637 Over a year ago

Thank you, however the problem is that i cannot use id's as they would be duplicated because I am using a repeater

Collectives™ on Stack Overflow

Javascript to display/hide multiple classes based upon criteria set

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related