Menu
<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
456
The hidden attribute hides the <div> element. You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid. A hidden <div> element is not visible, but it maintains its position on the page.
We hide the divs by adding a CSS class called hidden to the outer div called . text_container . This will trigger CSS to hide the inner div.
Completely hiding elements can be done in 3 ways: via the CSS property display , e.g. display: none; via the CSS property visibility , e.g. visibility: hidden; via the HTML5 attribute hidden , e.g. <span hidden>
Div tag has both open(<div>) and closing (</div>) tag and it is mandatory to close the tag. The Div is the most usable tag in web development because it helps us to separate out data in the web page and we can create a particular section for particular data or function in the web pages.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
