How to hide div html?

Question

<div class="navigation-menu w-32 d-flex flex-row"> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div id="more-hd more-vis"><i class="fas fa-chevron-circle-down"></i></div> </div>

I am trying to hide the last Div.I use bootstrap.So,d-none doesn't help, in css #more-hd display:none also,with JS document.getElementById("more-hd").style.display = "none" too.It is always visible..I also tried with ul > li first..nothing happens

You can't have multiple IDs in an element. The ID is more-hd more-vis, not more-hd. — Barmar
– Barmar, Commented May 5, 2018 at 7:26

Ankit Agarwal · Accepted Answer · 2018-05-05 07:33:09Z

Use display: none !important; to the last div add a class to the last div and use that css in that class. Using !important will override the css that has already been applied to this div. You also have multiple id, it is a bad practice so use a single id there.

.lastDiv{ display: none !important; }

<div class="navigation-menu w-32 d-flex flex-row"> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div id="more-hd more-vis" class='lastDiv'>SomeContent<i class="fas fa-chevron-circle-down"></i></div> </div>

If you want to use id then use a single id value with this code:

#more-hd{ display: none !important; }

<div class="navigation-menu w-32 d-flex flex-row"> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div id="more-hd" class='lastDiv'>SomeContent<i class="fas fa-chevron-circle-down"></i></div> </div>

You also has option for last-child selector in css to make sure whatever the id or class is for the last div inside class navigation-menu, it is always hidden:

.navigation-menu div:last-child{ display: none !important; }

<div class="navigation-menu w-32 d-flex flex-row"> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div id="more-hd more-vis" class='lastDiv'>SomeContent<i class="fas fa-chevron-circle-down"></i></div> </div>

patelarpan · Accepted Answer · 2018-05-05 07:31:08Z

you also use :last-child

NOTE: ID is always unique. so there is no meaning of two id

.navigation-menu div:last-child { display: none !important; }

<div class="navigation-menu w-32 d-flex flex-row"> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div id="more-hd"><i class="fas fa-chevron-circle-down"></i>test</div> </div>

Bhavik Tecksky · Accepted Answer · 2018-05-05 08:43:55Z

1

Please Apply This Css.

.navigation-menu div:last-child { display: none; }

answered May 5, 2018 at 8:43

Bhavik Tecksky

364 bronze badges

Comments

Barmar · Accepted Answer · 2018-05-05 07:28:53Z

You can't have a space in the id. If you want to put CSS on #more-hd, it should be

id="more-hd"

not

id="more-hd more-vis"

If you need multiple ways to refer to the element, use classes for the additional ones. It can only have one ID.

jvk · Accepted Answer · 2018-05-05 07:30:42Z

.navigation-menu .fa-chevron-circle-down{	display: none;	}

<div class="navigation-menu w-32 d-flex flex-row"> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div class="visible"><a href="#">Раздел1</a></div> <div id="more-hd more-vis"><i class="fas fa-chevron-circle-down">Test for hide</i></div> </div>

Collectives™ on Stack Overflow

How to hide div html?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Related