Apply same style to multiple nav buttons in CSS & JavaScript?

[MysteryLover]

How can I avoid having to create an individual CSS and JavaScript entry for every button in a nav bar?

Since every button has to have a unique ID for the JavaScript to work on it, I want to avoid having to literally write/copy-paste the same JS code for every button.

I'm just starting to learn JavaScript because of the "on click" necessary for my nav buttons, so I've not clear how I can reference that same code for every button. I can make it work if I have a full code entry in my .js file for each button, but I can't figure out how to just have the code once. I took the code from the W3Schools examples of clickable nav buttons, and I'm nesting them a couple layers deep.

Thank you!

C

 

[dsonesuk]

What CSS?

What javascript?

What html?

What w3schools click nav example?

What do you want to happen?

Why post a topic without giving necessary information, so it in most cases,  be ignored because  above info is missing?

[MysteryLover]

I've looked through a lot of responses to questions here, and the only consistent thing seems to be how rude the "guru" replies are... is it a requirement to be as rude as possible when replying? I'm not likely to bother using these forums after this... There are plenty of other places to learn about things without the nasty attitude from supposed experts.

I didn't realize you required the code examples from your own site to answer my question - but I've pasted the JavaScript and CSS below. To have multiple buttons that work, I have had to create multiple versions of these code blocks to correspond with the individual buttons... example btn1Function and btn2Function, btn1ID and btn2ID, etc. I don't want to have to do that for every button if I want them to look and act the same (hence my posting title Apply same style to multiple nav buttons...). Is there a way to do the code once, but have it apply to/be referenced by multiple buttons?

This is the JavaScript code:

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns;
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

 

This is the CSS that goes with it:

/* Dropdown Button */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

[dsonesuk]

Yes it can be done! Instead of using id reference you use the other reference, then by using this reference you can acheive the same result by targeting the next element of the element clicked.

Hope i have given you enough info for you to achieve the result you wanted. If you don't think its enough,  TOUGH where not mindreaders and apparently neither are you.