javascript override css display: none visible hidden

Question

I have a CSS id that both hides visibility and displays: none. When I click the button I would like for it to display. However, the only way I am able to make it work is by removing the display:none. I do not want this because it is an invisible element causing design to be messed up.

Ultimately the goal is to click button, make some elements disappear and some elements appear.

Here is the HTML

<div class="fwork1" id="fwork1">

    <a href="#portfolio" onclick="fWork1()">
        <img src="assets/img/portfolio/corinthmc/corinthmc_small.png" alt=""> 
    </a>

</div>

<div id="hwork1">

    <p>some text</p>

</div>

<div id="fWorkReturn">

    <button onclick="fWorkReturn()">Click</button>

</div>

Here is the CSS

#hwork1 {
    visibility: hidden;
    display: none;
}

Here is the Javascript

function fWork1() {
    document.getElementById("fwork2").style.display = "none";
    document.getElementById("fwork3").style.display = "none";
    document.getElementById("fwork4").style.display = "none";
    document.getElementById("hwork1").style.display = "block"; 
}

function fWorkReturn() {
    document.getElementById("fwork1").style.display = "initial";
    document.getElementById("fwork2").style.display = "initial";
    document.getElementById("fwork3").style.display = "initial";
    document.getElementById("fwork4").style.display = "initial";
    document.getElementById("hwork1").style.visibility = "hidden";
}

JSFiddle

Skylar Wuebker · Accepted Answer · 2018-05-23 20:18:38Z

3

The best way to handle this would be to add a class when you click on you element. your js would look like this:

function fWork1() {
    document.getElementById("fwork2").classList().add('active');
}

and you CSS will look like this:

#hwork1 {
    display: none;
}

#hwork1.active {
    display: block;
}

edited May 23, 2018 at 20:18

answered May 23, 2018 at 20:15

Skylar Wuebker

951 silver badge8 bronze badges

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

6 Comments

J. Titus Over a year ago

display: visible is not valid. display: block and visibility: visible would work.

tmoflash Over a year ago

apologies as I may be a little slow at understanding. I added class="active" to the id="hwork1" I then added the JS - function fWork1() { document.getElementById("fwork2").classList().add('active'); } not understanding what fwork2 is used for in this instance. When I used display: block it wasn't physically visible, but was causing disruption as being there in the design. I did use visibility: visible and it seemed to be hidden, but again I could not get it visible on click.

tmoflash Over a year ago

I am still having no luck. hwork1 is still not showing up.

Skylar Wuebker Over a year ago

it looks like your onclick=() isn't working on your button. When add this script in your html file you should get what you want. also change you onclick function to active() and this will work:

<script> function active() { 	if(document.getElementById("hwork1").classList.contains('active')) {   	document.getElementById("hwork1").classList.remove('active');   } else {   	document.getElementById("hwork1").classList.add('active');   }   } </script>

tmoflash Over a year ago

@SkylarWuebkerhow do I reverse it. It seems to work, but I need to reverse it back to display: none - hidden when another button is clicked.

|

Vivek · Accepted Answer · 2018-05-23 20:28:28Z

0

Change your code like this -

function hide() {
  document.getElementById("fwork2").style.visibility = "";
  document.getElementById("fwork3").style.visibility = "";
  document.getElementById("fwork4").style.visibility = "";
  document.getElementById("hwork1").style.visibility = "";
}

function show() {
  document.getElementById("fwork1").style.visibility = "hidden";
  document.getElementById("fwork2").style.visibility = "hidden";
  document.getElementById("fwork3").style.visibility = "hidden";
  document.getElementById("fwork4").style.visibility = "hidden";
  document.getElementById("hwork1").style.visibility = "hidden";
}

edited May 23, 2018 at 20:28

answered May 23, 2018 at 20:21

Vivek

1,55316 silver badges32 bronze badges

2 Comments

SrgSprinkles Over a year ago

You made the visibility hidden when clicked, when it's already hidden from the css.

Vivek Over a year ago

@SrgSprinkles removed unwanted css code, but still these will solve design messing up problem

Rob Monhemius · Accepted Answer · 2018-05-23 21:36:38Z

0

This is how you can change the visibility of an element with JavaScript. The current code changes the visibility property of some elements when the function is called / button is clicked. It should be fairly straightforward how to apply this in another context.

function hideFourAndShowSix(){
  let four = document.getElementById('four');
  let six = document.getElementById('six');
  six.style.setProperty('visibility', 'visible');
  six.style.setProperty('display', 'list-item');
  four.style.setProperty('visibility', 'hidden');
}

#six{
  visibility: hidden;
  display: none;
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li id="four">Four</li>
  <li>Five</li>
  <li id="six">Six</li>
</ul>
<button onclick="hideFourAndShowSix()">Hide no. 4 and show no.6</button>

PS: If you need extra explanation drop in a comment ;).

edited May 23, 2018 at 21:36

answered May 23, 2018 at 20:30

Rob Monhemius

5,1942 gold badges24 silver badges53 bronze badges

2 Comments

tmoflash Over a year ago

it makes complete sense what you are saying, but basically that is what I am already doing. I can make the elements that I want hodden. I can even bring them back. My issue is that I have a hidden element in CSS I do not want to show using visibility: hidden; display: none; - the element I want to show doesn't show when button is clicked. How do I override the display:none in js?

Rob Monhemius Over a year ago

@tmoflash You would have to set the display property to the value it should be ( usually inline, block, inline-block, but there are many more). Unfortunately you do have to know which one to use. ( Unless you can add the initial display: none in a class that is assigned to hidden elements. Then you can remove that class with JavaScript and get the default value again )

Collectives™ on Stack Overflow

javascript override css display: none visible hidden

3 Answers 3

6 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related