CODEWITHSUNDEEP
javascripthtmlcss
user2296604
user2296604

Reputation: 75

css property "display" not working properly

I am having issues with the CSS property >display> On my page I have hidden 4 div elements using display=none property now using javascript I want to display each property separately I am able to hide the elements and am able to make them appear on click but it never displays like it should its either all inline and the formatting is wrong I have used a lot of values for display eg: inline,block etc but i still can't get it right if someone can help me out ill appreciate it the code I am using is :

<script type="text/javascript">
document.getElementById("a").style.display="none";
document.getElementById("b").style.display="none";
document.getElementById("c").style.display="none";
document.getElementById("d").style.display="none";
function myFunctionA() {
document.getElementById("a").style.display="block";
document.getElementById("b").style.display="hidden";
document.getElementById("c").style.display="hidden";
document.getElementById("d").style.display="hidden";
}
function myFunctionB() {
document.getElementById("b").style.display="initial";
document.getElementById("a").style.display="hidden";
document.getElementById("c").style.display="hidden";
document.getElementById("d").style.display="hidden";
}
function myFunctionC() {
document.getElementById("c").style.display="initial";
document.getElementById("a").style.display="hidden";
document.getElementById("b").style.display="hidden";
document.getElementById("d").style.display="hidden";
}
function myFunctionD() {
document.getElementById("d").style.display="initial";
document.getElementById("a").style.display="hidden";
document.getElementById("b").style.display="hidden";
document.getElementById("c").style.display="hidden";
}
</script>

the page on which i see the result is :

http://theinformant.to/food-drink/

if you click on the names eg cooking, beverages you will see what am talking about

Upvotes: 0

Views: 2092

Answers (5)

elizandrra
elizandrra

Reputation: 1

<script type = "text/javascript" > document.write('<a style="display:block;width:100%;height:1px;" class="aff-ad-none"></a>');
    window.AFF_ONLOAD = window.AFF_ONLOAD || [];
    window.AFF_ONLOAD.push({
        lkid: "79197967",
        affid: "10207739",
        size: "120*600",
        type: "1",
        uid: "565258",
        language: "sp",
        web_id: "45",
        version: 110
    });
    var aff_s = document.createElement("script"),
        aff_h = document.getElementsByTagName("head")[0];
    aff_s.charset = "utf-8";
    aff_s.async = !0;
    aff_s.src = "https://js.firstgrabber.com/affasi_js.min.js";
    aff_h.insertBefore(aff_s, aff_h.firstChild); 
</script>

Upvotes: 0

Kurkula
Kurkula

Reputation: 6762

Suggestion. I see in the view source you use jQuery. Try using $('#domelementname') instead of document.getElementById("a"). There is more repetetive code.

Upvotes: 0

dejakob
dejakob

Reputation: 2092

It should be display='none' instead of display='hidden'.

Upvotes: 1

Brandon Gano
Brandon Gano

Reputation: 6710

You probably need to be toggling between display:hidden and display:block, as others have said. Consider using class names instead of updating the styles directly. This will make your code more manageable going forward. Also, see @blex's answer, as he's got some good advice on making the code less repetitive.

Here's an example of using classes instead of changing styles directly:

/* Hide an element */
document.getElementById('a').className = 'hide';

/* Show an element */
document.getElementById('a').className = '';

If you need to use more than one class on the elements, try classList.add('hide') and classList.remove('hide') instead.

Then in your CSS, you could use something like this:

.hide {
  display: none;
}

Upvotes: 1

blex
blex

Reputation: 25634

Your code is very repetitive. Try making it DRY (Don't Repeat Yourself). All you need is this:

function myFunction(id){
  var elements = document.querySelectorAll('.element');
  for(var i=0; i<elements.length; i++){
    elements[i].style.display = elements[i].id == id ? 'block' : 'none';
  }
}
.element{display: none;} #a{display: block;}
<button onclick="myFunction('a')">Show A</button>
<button onclick="myFunction('b')">Show B</button>
<button onclick="myFunction('c')">Show C</button>
<button onclick="myFunction('d')">Show D</button>

<div id="a" class="element">A</div>
<div id="b" class="element">B</div>
<div id="c" class="element">C</div>
<div id="d" class="element">D</div>

Upvotes: 4

Related Questions