Modify style of a html tag inside of a id-element

Question

On my website I have a style like this:

#titlebar a {
  display: inline-block;
}

and html:

<div id="titlebar">
  <nav>
    <a href="#">test</a>
    <a href="#">test</a>
    <a href="#">test</a>
    <a href="#">test</a>
  </nav>
</div>

I want to change the style of all the <a> tags in the <div> with the id titlebar . display should be changed from inline-block to block . Is this possible with JavaScript or do I have to search a different way to do this?

https://jsfiddle.net/Ln0a235v/2/

Complete Context:

 // Using Gurvinder's solution. menu = false; function toggleMenu() { if (menu) { document.getElementById("titlebar").style.maxHeight = "4em"; document.getElementById("fab").style.top = "calc(4em - 32px)"; document.querySelectorAll("#titlebar a").forEach(function(el) { el.style.display = "inline-block"; }); } else { document.getElementById("titlebar").style.maxHeight = "500px"; document.getElementById("fab").style.top = "0px"; document.querySelectorAll("#titlebar a").forEach(function(el) { el.style.display = "block"; }); } menu = !menu; } 

 body { background: #ffffff; font-family: sans-serif; } #titlebar { position: fixed; top: 0; left: 0; right: 0; background: #3f51b5; min-height: 4em; max-height: 4em; box-shadow: 0px 4px 8px #757575; transition: max-height 0.3s; } #titlebar a { font-variant: small-caps; line-height: 4em; display: inline-block; padding: 0px 16px; margin: 0px; color: #ffffff; text-decoration: none; transition: background 0.2s, display 1s; outline: none; } #titlebar a:hover { background: #ff4081; } #fab { position: fixed; width: 64px; height: 64px; z-index: 100; /*right: 64px;*/ right: 3%; top: calc(4em - 32px); transition: top 0.3s; } .main { box-shadow: 0px 4px 8px #757575; width: 80%; margin: 0 auto; margin-bottom: 64px; } .content { padding: 6em 0; margin: 0 10%; } hr { border: 1px solid #c5cae9; } .content img { float: right; margin-left: 32px; margin-bottom: 32px; width: 30%; min-width: 256px; box-shadow: 0px 4px 8px #757575; padding: 8px; } 

 <div id="titlebar"> <nav> <a onclick="toggleMenu()" href="#">ToggleMenu</a> <a href="#">test</a> <a href="#">test</a> <a href="#">test</a> </nav> </div> <div class="main"> <div class="content"> <h1>Lorem ipsum</h1> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer </p> <hr/> <h1>Lorem ipsum</h1> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer </p> </div> </div> 

Answer 1

Yes, it is possible with JavaScript. A better and unobtrusive way is to use a combination of both JavaScript and CSS:

 setTimeout(function () { // See from here: document.getElementById("titlebar").classList.add("block"); }, 1000); 

 #titlebar a { display: inline-block; background: #ccf; } #titlebar.block a { display: block; } 

 <div id="titlebar"> <nav> <a href="#">test</a> <a href="#">test</a> <a href="#">test</a> <a href="#">test</a> </nav> </div> 

Update: Based on the fiddle by OP, I have applied my solution here:

 function toggleMenu() { document.getElementById("titlebar").classList.toggle("block"); } 

 body { background: #ffffff; font-family: sans-serif; } #titlebar { position: fixed; top: 0; left: 0; right: 0; background: #3f51b5; min-height: 4em; max-height: 4em; box-shadow: 0px 4px 8px #757575; transition: max-height 0.3s; } #titlebar a { font-variant: small-caps; line-height: 4em; display: inline-block; padding: 0px 16px; margin: 0px; color: #ffffff; text-decoration: none; transition: background 0.2s, display 1s; outline: none; } #titlebar a:hover { background: #ff4081; } #fab { position: fixed; width: 64px; height: 64px; z-index: 100; /*right: 64px;*/ right: 3%; top: calc(4em - 32px); transition: top 0.3s; } .main { box-shadow: 0px 4px 8px #757575; width: 80%; margin: 0 auto; margin-bottom: 64px; } .content { padding: 6em 0; margin: 0 10%; } hr { border: 1px solid #c5cae9; } .content img { float: right; margin-left: 32px; margin-bottom: 32px; width: 30%; min-width: 256px; box-shadow: 0px 4px 8px #757575; padding: 8px; } #titlebar.block { max-height: none; } #titlebar.block a { display: block; } 

 <div id="titlebar"> <nav> <a onclick="toggleMenu(); return false;" href="#">ToggleMenu</a> <a href="#">test</a> <a href="#">test</a> <a href="#">test</a> </nav> </div> <div class="main"> <div class="content"> <h1>Lorem ipsum</h1> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer </p> <hr/> <h1>Lorem ipsum</h1> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer </p> </div> </div> 

The changed elements are here:

<a onclick="toggleMenu(); return false;" href="#">ToggleMenu</a>
// Added a return false.

CSS Addition

#titlebar.block {
  max-height: none;
}
#titlebar.block a {
  display: block;
}

Answer 2

Plain JS approach

document.querySelectorAll( "#titlebar a" ).forEach( function(el){
   el.style.display = "block";
});

Demo

 document.querySelectorAll("#titlebar a").forEach(function(el) { el.style.display = "block"; }); 

 #titlebar a { display: inline-block; } 

 <div id="titlebar"> <nav> <a href="#">test</a> <a href="#">test</a> <a href="#">test</a> <a href="#">test</a> </nav> </div> 

Answer 3

Iterate over each control and set the display to block

var ctrls = document.getElementById("titlebar").getElementsByTagName("a");
for (var i = 0; i < ctrls.length; i++)
  ctrls[i].style.display = "block";

You can check the fiddle at here

Do not know the context, so as you asked giving you the javascript suggestion but it can also be done using css