Not sure how to create an array for multiple dropdown menus

Question

I have all these multiple variables and IF statements for each button. I am wondering how to properly put them in an array to shorten the length of code. I have tried but had no success. Also, because each button uses ID's instead of Class names in HTML, the CSS file has gotten quite large. For some reason changing them to classes and changing the appropriate javascript code "getElementById" to "getElementsByClassName" does not work.

Help would be greatly appreciated. There are 9 different buttons each with a unique ID for the box, the button and the content of the button.

Please note that the first array is only for closing the dropdown menues not opening them

Here is the relevant code:

var dropdownArray = ['dropdown_content1', 'dropdown_content2', 'dropdown_content3', 'dropdown_content4', 'dropdown_content5', 'dropdown_content6', 'dropdown_content7', 'dropdown_content8', 'dropdown_content9'];
window.addEventListener('mouseup', function (event) {        
    "use strict";
    for (var i=0; i < dropdownArray.length; i++) {
    var rightdropdown = document.getElementById(dropdownArray[i]);
    if(event.target != rightdropdown) {
        rightdropdown.style.display = 'none';
    }
    }
});

window.onload = function () {
    "use strict";
    var leftbutton1 = document.getElementById('left_side_button1');
    var leftdropdowncontent1 = document.getElementById('dropdown_content1');
    
    var leftbutton2 = document.getElementById('left_side_button2');
    var leftdropdowncontent2 = document.getElementById('dropdown_content2');
    
    var leftbutton3 = document.getElementById('left_side_button3');
    var leftdropdowncontent3 = document.getElementById('dropdown_content3');
    
    var midbutton4 = document.getElementById('mid_side_button4');
    var middropdowncontent4 = document.getElementById('dropdown_content4');
    
    var midbutton5 = document.getElementById('mid_side_button5');
    var middropdowncontent5 = document.getElementById('dropdown_content5');
    
    var midbutton6 = document.getElementById('mid_side_button6');
    var middropdowncontent6 = document.getElementById('dropdown_content6')
    
    var rightbutton7 = document.getElementById('right_side_button7');
    var rightdropdowncontent7 = document.getElementById('dropdown_content7');
    
    var rightbutton8 = document.getElementById('right_side_button8');
    var rightdropdowncontent8 = document.getElementById('dropdown_content8');
    
    var rightbutton9 = document.getElementById('right_side_button9');
    var rightdropdowncontent9 = document.getElementById('dropdown_content9');
    document.onclick = function (e) {
        if (e.target === leftbutton1) {
            leftdropdowncontent1.style.display = 'block';
        }
        if (e.target === leftbutton2) {
            leftdropdowncontent2.style.display = 'block';
        }
        if (e.target === leftbutton3) {
            leftdropdowncontent3.style.display = 'block';
        }
        if (e.target === midbutton4) {
            middropdowncontent4.style.display = 'block';
        }
        if (e.target === midbutton5) {
            middropdowncontent5.style.display = 'block';
        }
        if (e.target === midbutton6) {
            middropdowncontent6.style.display = 'block'
        }
        if (e.target === rightbutton7) {
            rightdropdowncontent7.style.display = 'block';
        }
        if (e.target === rightbutton8) {
            rightdropdowncontent8.style.display = 'block';
        }
        if (e.target === rightbutton9) {
            rightdropdowncontent9.style.display = 'block';
        }
    };
};

#mid_container{
    margin: 0px auto;
    overflow: auto;
    width: 1000px;
    display:block;
    background-color: white;
    border: 1px solid black;
    text-align: center;
    align-content: center;
    margin-bottom: 105px;
}
#container_top_padder{
    padding-top: 10px;
    padding-bottom: 10px;
    margin-right: 50px;
    margin-left: 50px;
    text-align: center;
    border-bottom: 2px solid black;
}
#container_top_padder li{
    text-decoration: none;
    display: inline-block;
    font-weight: none;
}
#individual_top_padder_text{
    margin: 0px auto;
}
#vehicle_1_header{ /* not assigned at the moment */
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 0px;
    padding: 0px;
    background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
    width: 100px;
    float: left;
    border-bottom: 2px solid black;
}
#vehicle_2_header{  /* not assigned at the moment */
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 0px;
    padding: 0px;
    background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
    width: 100px;
    float: left;
    border-bottom: 2px solid black;
}
#vehicle_3_header{  /* not assigned at the moment */
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 0px;
    padding: 0px;
    background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
    width: 100px;
    float: right;
    border-bottom: 2px solid black;
}
.compare_sections_titles{   /* not assigned at the moment */
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 2px;
    margin-bottom: 0px;
    display:inline-block;
}
#left_section{
    margin-left: 15px;
    margin-right: 5px;
    margin-bottom: 0px;
    margin-top: 5px;
    float: left;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 48px;
    width: 300px;
    background-color: white;
    box-shadow: 4px 4px 4px #888;
    -moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
}
#left_side_button1{
    /*background-color: aqua; */
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content1{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content1 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content1 a:hover {
    background-color: #f1f1f1;
}
#left_side_button2{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content2{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content2 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content2 a:hover {
    background-color: #f1f1f1;
}
#left_side_button3{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);   
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
}
#dropdown_content3{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content3 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content3 a:hover {
    background-color: #f1f1f1;
}
#mid_section{
    margin-left: 25px;
    margin-right: 5px;
    margin-bottom: 15px;
    margin-top: 5px;
    float: left;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 50px;
    width: 300px;
    background-color: white;
    box-shadow: 4px 4px 4px #888;
    -moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
}
#mid_side_button4{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content4{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content4 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown_all_text{
    color: black;
    text-align:center;
}
#dropdown_content4 a:hover {
    background-color: #f1f1f1
}
#mid_side_button5{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content5{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content5 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content5 a:hover {
    background-color: #f1f1f1
}
#mid_side_button6{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
}
#dropdown_content6{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content6 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content6 a:hover {
    background-color: #f1f1f1
}
#right_section{
    margin-right: 15px;
    margin-bottom: 0px;
    margin-top: 5px;
    float: right;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 50px;
    width: 300px;
    background-color: white;
    box-shadow: 4px 4px 4px #888;
    -moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
}
#right_side_button7{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content7{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content7 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content7 a:hover {
    background-color: #f1f1f1;
}
#right_side_button8{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content8{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
    z-index: 10000;
}
#dropdown_content8 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content8 a:hover {
    background-color: #f1f1f1;
}
#right_side_button9{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
}
#dropdown_content9{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content9 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

<div id="mid_container">
        <header id="container_top_padder">
            <li><h2 id="individual_top_padder_text">Compare Vehicles</h2></li>
        </header>
        <article id="left_section">
            <button id="left_side_button1">Make</button>
            <div class="hidden_border1">
                <div id="dropdown_content1">                    
                <a class="dropdown_all_text" href="#">Cars</a>
                <a class="dropdown_all_text" href="#">Bikes</a>
                <a class="dropdown_all_text" href="#">Trucks</a>
                </div>
            </div>
            <button id="left_side_button2">Model</button>
                <div id="dropdown_content2">
                    <a class="dropdown_all_text" href="#">Cars</a>
                    <a class="dropdown_all_text" href="#">Bikes</a>
                    <a class="dropdown_all_text" href="#">Trucks</a>
                </div>
            <button id="left_side_button3">Year</button>
                <div id="dropdown_content3">
                    <a class="dropdown_all_text" href="#">Cars</a>
                    <a class="dropdown_all_text" href="#">Bikes</a>
                    <a class="dropdown_all_text" href="#">Trucks</a>
                </div>
        </article>
        <article id="mid_section">
            <button id="mid_side_button4">Make</button> 
                <div id="dropdown_content4">
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 2</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 3</a></p>
                </div>
            <button id="mid_side_button5">Model</button>
                <div id="dropdown_content5">
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                </div>
            <button id="mid_side_button6">Year</button>
                <div id="dropdown_content6">
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                </div>
        </article>
        <article id="right_section">
            <button id="right_side_button7">Make</button>
                <div id="dropdown_content7">
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 2</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 3</a></p>
                </div>
            <button id="right_side_button8">Model</button>
                <div id="dropdown_content8">
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                </div>
            <button id="right_side_button9">Year</button>
                <div id="dropdown_content9">
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                </div>
        </article>
    </div>

GraveyardQueen · Accepted Answer · 2016-11-20 03:51:31Z

You could do something like this,it will definitely work

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
  <script src="angular.min.js"></script>
  <style>
  #mid_container{
    margin: 0px auto;
    overflow: auto;
    width: 1000px;
    display:block;
    background-color: white;
    border: 1px solid black;
    text-align: center;
    align-content: center;
    margin-bottom: 105px;
}
#container_top_padder{
    padding-top: 10px;
    padding-bottom: 10px;
    margin-right: 50px;
    margin-left: 50px;
    text-align: center;
    border-bottom: 2px solid black;
}
#container_top_padder li{
    text-decoration: none;
    display: inline-block;
    font-weight: none;
}
#individual_top_padder_text{
    margin: 0px auto;
}
#vehicle_1_header{ /* not assigned at the moment */
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 0px;
    padding: 0px;
    background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
    width: 100px;
    float: left;
    border-bottom: 2px solid black;
}
#vehicle_2_header{  /* not assigned at the moment */
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 0px;
    padding: 0px;
    background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
    width: 100px;
    float: left;
    border-bottom: 2px solid black;
}
#vehicle_3_header{  /* not assigned at the moment */
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 0px;
    padding: 0px;
    background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
    width: 100px;
    float: right;
    border-bottom: 2px solid black;
}
.compare_sections_titles{   /* not assigned at the moment */
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 2px;
    margin-bottom: 0px;
    display:inline-block;
}
#left_section{
    margin-left: 15px;
    margin-right: 5px;
    margin-bottom: 0px;
    margin-top: 5px;
    float: left;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 48px;
    width: 300px;
    background-color: white;
    box-shadow: 4px 4px 4px #888;
    -moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
}
#left_side_button1{
    /*background-color: aqua; */
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content1{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content1 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content1 a:hover {
    background-color: #f1f1f1;
}
#left_side_button2{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content2{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content2 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content2 a:hover {
    background-color: #f1f1f1;
}
#left_side_button3{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);   
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
}
#dropdown_content3{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content3 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content3 a:hover {
    background-color: #f1f1f1;
}
#mid_section{
    margin-left: 25px;
    margin-right: 5px;
    margin-bottom: 15px;
    margin-top: 5px;
    float: left;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 50px;
    width: 300px;
    background-color: white;
    box-shadow: 4px 4px 4px #888;
    -moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
}
#mid_side_button4{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content4{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content4 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown_all_text{
    color: black;
    text-align:center;
}
#dropdown_content4 a:hover {
    background-color: #f1f1f1
}
#mid_side_button5{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content5{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content5 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content5 a:hover {
    background-color: #f1f1f1
}
#mid_side_button6{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
}
#dropdown_content6{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content6 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content6 a:hover {
    background-color: #f1f1f1
}
#right_section{
    margin-right: 15px;
    margin-bottom: 0px;
    margin-top: 5px;
    float: right;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 50px;
    width: 300px;
    background-color: white;
    box-shadow: 4px 4px 4px #888;
    -moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
}
#right_side_button7{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content7{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content7 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content7 a:hover {
    background-color: #f1f1f1;
}
#right_side_button8{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
    margin-bottom: 20px;
}
#dropdown_content8{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
    z-index: 10000;
}
#dropdown_content8 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#dropdown_content8 a:hover {
    background-color: #f1f1f1;
}
#right_side_button9{
    background:-webkit-linear-gradient(#ffffff, #c6c6c6);
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
}
#dropdown_content9{
    display: none;
    overflow: hidden;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#dropdown_content9 a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
</style>
</head>
<body>
<div id="mid_container">
        <header id="container_top_padder">
            <li><h2 id="individual_top_padder_text">Compare Vehicles</h2></li>
        </header>
        <article id="left_section">
            <button id="left_side_button1">Make</button>
            <div class="hidden_border1">
                <div id="dropdown_content1">                    
                <a class="dropdown_all_text" href="#">Cars</a>
                <a class="dropdown_all_text" href="#">Bikes</a>
                <a class="dropdown_all_text" href="#">Trucks</a>
                </div>
            </div>
            <button id="left_side_button2">Model</button>
                <div id="dropdown_content2">
                    <a class="dropdown_all_text" href="#">Cars</a>
                    <a class="dropdown_all_text" href="#">Bikes</a>
                    <a class="dropdown_all_text" href="#">Trucks</a>
                </div>
            <button id="left_side_button3">Year</button>
                <div id="dropdown_content3">
                    <a class="dropdown_all_text" href="#">Cars</a>
                    <a class="dropdown_all_text" href="#">Bikes</a>
                    <a class="dropdown_all_text" href="#">Trucks</a>
                </div>
        </article>
        <article id="mid_section">
            <button id="mid_side_button4">Make</button> 
                <div id="dropdown_content4">
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 2</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 3</a></p>
                </div>
            <button id="mid_side_button5">Model</button>
                <div id="dropdown_content5">
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                </div>
            <button id="mid_side_button6">Year</button>
                <div id="dropdown_content6">
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link1</a></p>
                </div>
        </article>
        <article id="right_section">
            <button id="right_side_button7">Make</button>
                <div id="dropdown_content7">
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 2</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 3</a></p>
                </div>
            <button id="right_side_button8">Model</button>
                <div id="dropdown_content8">
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                </div>
            <button id="right_side_button9">Year</button>
                <div id="dropdown_content9">
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                    <p><a class="dropdown_all_text" href="#">Link 1</a></p>
                </div>
        </article>
    </div>
<script>
var dropdownArray = ['dropdown_content1', 'dropdown_content2', 'dropdown_content3', 'dropdown_content4', 'dropdown_content5', 'dropdown_content6', 'dropdown_content7', 'dropdown_content8', 'dropdown_content9'];
window.addEventListener('mouseup', function (event) {        
    "use strict";
    for (var i=0; i < dropdownArray.length; i++) {
    var rightdropdown = document.getElementById(dropdownArray[i]);
    if(event.target != rightdropdown) {
        rightdropdown.style.display = 'none';
    }
    }
});

window.onload = function () {
    "use strict";
    var button=[];
    var dropdown=[];
    for(var i=1;i<=9;i++){
    	dropdown[i]=document.getElementById('dropdown_content'+i);
    }
    for(var j=1;j<=3;j++){
    	button[j]=document.getElementById('left_side_button'+j);
    	button[j+3]=document.getElementById('mid_side_button'+(j+3));
    	button[j+6]=document.getElementById('right_side_button'+(j+6));
    }
    document.onclick = function (e) {
    	for(var k=1;k<=9;k++){
        if (e.target === button[k]) {
        	dropdown[k].style.display = 'block';
        }
        }
    };
};
</script>
</body>
</html>

I have saved all the drop downs and buttons in two arrays and then called them using an array as well in the onclick,

and this would be the javascript code i have changed,

window.onload = function () {
"use strict";
var button=[];
var dropdown=[];
for(var i=1;i<=9;i++){
    dropdown[i]=document.getElementById('dropdown_content'+i);
}
for(var j=1;j<=3;j++){
    button[j]=document.getElementById('left_side_button'+j);
    button[j+3]=document.getElementById('mid_side_button'+(j+3));
    button[j+6]=document.getElementById('right_side_button'+(j+6));
}
document.onclick = function (e) {
    for(var k=1;k<=9;k++){
    if (e.target === button[k]) {
        dropdown[k].style.display = 'block';
    }
    }
};
};

charlietfl · Accepted Answer · 2016-11-20 03:27:14Z

0

Since you tagged this with jQuery you can do this as follows:

$('button[id^=left_side_button]').click(function(){
    $(this).next().show();// or use toggle() if you want to show/hide on click
});

Using a common class like left_side_button would simplify this further to

$('.left_side_button').click(function(){
    $(this).next().show();// or use toggle() if you want to show/hide on click
});

answered Nov 20, 2016 at 3:27

charlietfl

172k14 gold badges125 silver badges154 bronze badges

2 Comments

Dale Over a year ago

Would i put this within the window.onload function?

charlietfl Over a year ago

Yes or wrap in $(function(){ }) or put script at bottom of body after all the elements

repzero · Accepted Answer · 2016-11-20 03:34:19Z

You can use a dictionary container Like this

 var dict = {
    'left_side_button1': 'dropdown_content1',
    'left_side_button2': 'dropdown_content2',
    'left_side_button3': 'dropdown_content3',
    'mid_side_button4': 'dropdown_content4',
    'mid_side_button5': 'dropdown_content5',
    'mid_side_button6': 'dropdown_content6',
    'right_side_button7': 'dropdown_content7',
    'right_side_button8': 'dropdown_content8',
    'right_side_button9': 'dropdown_content9'
  }

Snippet below

var dropdownArray = ['dropdown_content1', 'dropdown_content2', 'dropdown_content3', 'dropdown_content4', 'dropdown_content5', 'dropdown_content6', 'dropdown_content7', 'dropdown_content8', 'dropdown_content9'];
window.addEventListener('mouseup', function(event) {
  "use strict";
  for (var i = 0; i < dropdownArray.length; i++) {
    var rightdropdown = document.getElementById(dropdownArray[i]);
    if (event.target != rightdropdown) {
      rightdropdown.style.display = 'none';
    }
  }
});

window.onload = function() {
  "use strict";
  var dict = {
    'left_side_button1': 'dropdown_content1',
    'left_side_button2': 'dropdown_content2',
    'left_side_button3': 'dropdown_content3',
    'mid_side_button4': 'dropdown_content4',
    'mid_side_button5': 'dropdown_content5',
    'mid_side_button6': 'dropdown_content6',
    'right_side_button7': 'dropdown_content7',
    'right_side_button8': 'dropdown_content8',
    'right_side_button9': 'dropdown_content9'
  }

  document.onclick = function(e) {
    for (var key in dict) {
      if(e.target === document.getElementById(key)) {
        document.getElementById(dict[key]).style.display = 'block';
      }
    }
  }

};

#mid_container {
  margin: 0px auto;
  overflow: auto;
  width: 1000px;
  display: block;
  background-color: white;
  border: 1px solid black;
  text-align: center;
  align-content: center;
  margin-bottom: 105px;
}
#container_top_padder {
  padding-top: 10px;
  padding-bottom: 10px;
  margin-right: 50px;
  margin-left: 50px;
  text-align: center;
  border-bottom: 2px solid black;
}
#container_top_padder li {
  text-decoration: none;
  display: inline-block;
  font-weight: none;
}
#individual_top_padder_text {
  margin: 0px auto;
}
#vehicle_1_header {
  /* not assigned at the moment */
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
  margin-bottom: 0px;
  padding: 0px;
  background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
  width: 100px;
  float: left;
  border-bottom: 2px solid black;
}
#vehicle_2_header {
  /* not assigned at the moment */
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
  margin-bottom: 0px;
  padding: 0px;
  background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
  width: 100px;
  float: left;
  border-bottom: 2px solid black;
}
#vehicle_3_header {
  /* not assigned at the moment */
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
  margin-bottom: 0px;
  padding: 0px;
  background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
  width: 100px;
  float: right;
  border-bottom: 2px solid black;
}
.compare_sections_titles {
  /* not assigned at the moment */
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 2px;
  margin-bottom: 0px;
  display: inline-block;
}
#left_section {
  margin-left: 15px;
  margin-right: 5px;
  margin-bottom: 0px;
  margin-top: 5px;
  float: left;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 48px;
  width: 300px;
  background-color: white;
  box-shadow: 4px 4px 4px #888;
  -moz-border-radius-topleft: 10px;
  border-top-left-radius: 10px;
}
#left_side_button1 {
  /*background-color: aqua; */
  background: -webkit-linear-gradient(#ffffff, #c6c6c6);
  padding-right: 90px;
  padding-left: 90px;
  font-size: 16px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  box-shadow: 2px 2px 2px #888;
  margin-bottom: 20px;
}
#dropdown_content1 {
  display: none;
  overflow: hidden;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  margin-left: 40px;
  text-align: left;
}
#dropdown_content1 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
#dropdown_content1 a:hover {
  background-color: #f1f1f1;
}
#left_side_button2 {
  background: -webkit-linear-gradient(#ffffff, #c6c6c6);
  padding-right: 90px;
  padding-left: 90px;
  font-size: 16px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  box-shadow: 2px 2px 2px #888;
  margin-bottom: 20px;
}
#dropdown_content2 {
  display: none;
  overflow: hidden;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  margin-left: 40px;
  text-align: left;
}
#dropdown_content2 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
#dropdown_content2 a:hover {
  background-color: #f1f1f1;
}
#left_side_button3 {
  background: -webkit-linear-gradient(#ffffff, #c6c6c6);
  padding-right: 90px;
  padding-left: 90px;
  font-size: 16px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  box-shadow: 2px 2px 2px #888;
}
#dropdown_content3 {
  display: none;
  overflow: hidden;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  margin-left: 40px;
  text-align: left;
}
#dropdown_content3 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
#dropdown_content3 a:hover {
  background-color: #f1f1f1;
}
#mid_section {
  margin-left: 25px;
  margin-right: 5px;
  margin-bottom: 15px;
  margin-top: 5px;
  float: left;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 50px;
  width: 300px;
  background-color: white;
  box-shadow: 4px 4px 4px #888;
  -moz-border-radius-topleft: 10px;
  border-top-left-radius: 10px;
}
#mid_side_button4 {
  background: -webkit-linear-gradient(#ffffff, #c6c6c6);
  padding-right: 90px;
  padding-left: 90px;
  font-size: 16px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  box-shadow: 2px 2px 2px #888;
  margin-bottom: 20px;
}
#dropdown_content4 {
  display: none;
  overflow: hidden;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  margin-left: 40px;
  text-align: left;
}
#dropdown_content4 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown_all_text {
  color: black;
  text-align: center;
}
#dropdown_content4 a:hover {
  background-color: #f1f1f1
}
#mid_side_button5 {
  background: -webkit-linear-gradient(#ffffff, #c6c6c6);
  padding-right: 90px;
  padding-left: 90px;
  font-size: 16px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  box-shadow: 2px 2px 2px #888;
  margin-bottom: 20px;
}
#dropdown_content5 {
  display: none;
  overflow: hidden;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  margin-left: 40px;
  text-align: left;
}
#dropdown_content5 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
#dropdown_content5 a:hover {
  background-color: #f1f1f1
}
#mid_side_button6 {
  background: -webkit-linear-gradient(#ffffff, #c6c6c6);
  padding-right: 90px;
  padding-left: 90px;
  font-size: 16px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  box-shadow: 2px 2px 2px #888;
}
#dropdown_content6 {
  display: none;
  overflow: hidden;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  margin-left: 40px;
  text-align: left;
}
#dropdown_content6 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
#dropdown_content6 a:hover {
  background-color: #f1f1f1
}
#right_section {
  margin-right: 15px;
  margin-bottom: 0px;
  margin-top: 5px;
  float: right;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 50px;
  width: 300px;
  background-color: white;
  box-shadow: 4px 4px 4px #888;
  -moz-border-radius-topleft: 10px;
  border-top-left-radius: 10px;
}
#right_side_button7 {
  background: -webkit-linear-gradient(#ffffff, #c6c6c6);
  padding-right: 90px;
  padding-left: 90px;
  font-size: 16px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  box-shadow: 2px 2px 2px #888;
  margin-bottom: 20px;
}
#dropdown_content7 {
  display: none;
  overflow: hidden;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  margin-left: 40px;
  text-align: left;
}
#dropdown_content7 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
#dropdown_content7 a:hover {
  background-color: #f1f1f1;
}
#right_side_button8 {
  background: -webkit-linear-gradient(#ffffff, #c6c6c6);
  padding-right: 90px;
  padding-left: 90px;
  font-size: 16px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  box-shadow: 2px 2px 2px #888;
  margin-bottom: 20px;
}
#dropdown_content8 {
  display: none;
  overflow: hidden;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  margin-left: 40px;
  text-align: left;
  z-index: 10000;
}
#dropdown_content8 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
#dropdown_content8 a:hover {
  background-color: #f1f1f1;
}
#right_side_button9 {
  background: -webkit-linear-gradient(#ffffff, #c6c6c6);
  padding-right: 90px;
  padding-left: 90px;
  font-size: 16px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  box-shadow: 2px 2px 2px #888;
}
#dropdown_content9 {
  display: none;
  overflow: hidden;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  margin-left: 40px;
  text-align: left;
}
#dropdown_content9 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

<div id="mid_container">
  <header id="container_top_padder">
    <li>
      <h2 id="individual_top_padder_text">Compare Vehicles</h2>
    </li>
  </header>
  <article id="left_section">
    <button id="left_side_button1">Make</button>
    <div class="hidden_border1">
      <div id="dropdown_content1">
        <a class="dropdown_all_text" href="#">Cars</a>
        <a class="dropdown_all_text" href="#">Bikes</a>
        <a class="dropdown_all_text" href="#">Trucks</a>
      </div>
    </div>
    <button id="left_side_button2">Model</button>
    <div id="dropdown_content2">
      <a class="dropdown_all_text" href="#">Cars</a>
      <a class="dropdown_all_text" href="#">Bikes</a>
      <a class="dropdown_all_text" href="#">Trucks</a>
    </div>
    <button id="left_side_button3">Year</button>
    <div id="dropdown_content3">
      <a class="dropdown_all_text" href="#">Cars</a>
      <a class="dropdown_all_text" href="#">Bikes</a>
      <a class="dropdown_all_text" href="#">Trucks</a>
    </div>
  </article>
  <article id="mid_section">
    <button id="mid_side_button4">Make</button>
    <div id="dropdown_content4">
      <p><a class="dropdown_all_text" href="#">Link 1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link 2</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link 3</a>
      </p>
    </div>
    <button id="mid_side_button5">Model</button>
    <div id="dropdown_content5">
      <p><a class="dropdown_all_text" href="#">Link1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link1</a>
      </p>
    </div>
    <button id="mid_side_button6">Year</button>
    <div id="dropdown_content6">
      <p><a class="dropdown_all_text" href="#">Link1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link1</a>
      </p>
    </div>
  </article>
  <article id="right_section">
    <button id="right_side_button7">Make</button>
    <div id="dropdown_content7">
      <p><a class="dropdown_all_text" href="#">Link 1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link 2</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link 3</a>
      </p>
    </div>
    <button id="right_side_button8">Model</button>
    <div id="dropdown_content8">
      <p><a class="dropdown_all_text" href="#">Link 1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link 1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link 1</a>
      </p>
    </div>
    <button id="right_side_button9">Year</button>
    <div id="dropdown_content9">
      <p><a class="dropdown_all_text" href="#">Link 1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link 1</a>
      </p>
      <p><a class="dropdown_all_text" href="#">Link 1</a>
      </p>
    </div>
  </article>
</div>

Collectives™ on Stack Overflow

Not sure how to create an array for multiple dropdown menus

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related