how can I get the li classes inside the bootstrap dropdown menu using the classList.contains from javascript

Question

This is what i'm trying to achive: when i open the dropdow menu a specific div (div id="spacer1") shoud be displayed and when i close the dropdown menu spacer1 should be hidden.

I've tryed this: when the drop down is open bootstrap adds a new class ("open") to the li tag; so used js(classList.contains) to check if the class"open is added to the li tag,

if (listArr[i].classList.contains('open'))

if so then it should make "spacer1"visible.

$("#spacer1").css("display", "block");

I've been searching for days but can't seem to get it to work. Really need some help.

Many thanks in advance....

This is the html

<section id="brouw-proces" class="bg-layou-2">
<div class="container-fluid">
    <div class="brouwen">
        <div class="container-fluid">

            <!-- ================dropdown-menu============== -->

            <div class="navbar brouwen-navbar navbar-inverse" role="navigation">
                <div class ="container">
                    <div class="brouwen-nav">

                        <ul id="brouwen-Nav-List" class= "nav navbar-nav">

                            <li class="dropdown">
                                <a href="#" class = "dropdown-toggle" data-toggle = "dropdown">Mouten<b class = "caret"></b></a>
                                <ul>
                                    <li><a href = "#">Zicht</a></li>
                                    <li><a href = "#">Gehoor</a></li>
                                    <li><a href = "#">Voelen</a></li>
                                    <li><a href = "#">Proeven</a></li>
                                    <li><a href = "#">Ruiken</a></li>
                                </ul>
                            </li>
                            <li class = "dropdown">
                                <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">vergisten<b class = "caret"></b></a>
                                <ul class = "dropdown-menu">
                                    <li><a href = "#">Twitter</a></li>
                                    <li><a href = "#">Facebook</a></li>
                                    <li><a href = "#">Google+</a></li>
                                    <li><a href = "#">Instagram</a></li>
                                </ul>
                            </li>
                            <li class = "dropdown">
                                <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">vergisten<b class = "caret"></b></a>
                                <ul class = "dropdown-menu">
                                    <li><a href = "#">Twitter</a></li>
                                    <li><a href = "#">Facebook</a></li>
                                    <li><a href = "#">Google+</a></li>
                                    <li><a href = "#">Instagram</a></li>
                                </ul>
                            </li>
                            <li class = "dropdown">
                                <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Lageren<b class = "caret"></b></a>
                                <ul class = "dropdown-menu">
                                    <li><a href = "#">Twitter</a></li>
                                    <li><a href = "#">Facebook</a></li>
                                    <li><a href = "#">Google+</a></li>
                                    <li><a href = "#">Instagram</a></li>
                                </ul>

                            </li>
                            <li class = "dropdown">
                                <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Dealcoholisatie<b class = "caret"></b></a>
                                <ul class = "dropdown-menu">
                                    <li><a href = "#">Twitter</a></li>
                                    <li><a href = "#">Facebook</a></li>
                                    <li><a href = "#">Google+</a></li>
                                    <li><a href = "#">Instagram</a></li>
                                </ul>

                            </li>
                        </ul><!-- /end of brouwen-Nav-List -->
                    </div><!--brouwen navigation menu -->                           
                </div> <!-- /container -->
            </div>
            <!-- ==============dropdown-menu================ -->
        </div>

    </div><!-- /brouwen -->

    <div id="spacer1"></div> <!-- the div that sopoused to hide and show 
    simultaniously with the dropdown menu -->

</div><!-- /container-fluid --> 

js

<script>
$(document).ready(function(){
    var brouwenNavList = document.getElementById('brouwen-Nav-List');
    var listArr = brouwenNavList.getElementsByTagName('li');
    for (var i=0; i<listArr.length; i++){
        function doIt(){
            if (listArr[i].classList.contains('open')){
                $("#spacer1").css("display", "block");
            } else{
                $("#spacer1").css("display", "none");
            }
        }
    }
});

div that should be displayed is set not to show by defauld by the css

#spacer1{
height: 300px;
width: auto;
background-color: transparent;
display: none;

}

Answer 1

One of the solutions could be listening to the custom events from the dropdown plugin : Bootstrap Dropdowns Event

And based on this, you can show/hide your spacer this way : JSFiddle

$(document).ready(function(){
    var spacer = $('#spacer1');
    var navList = $('#brouwen-Nav-List');

    navList.on('show.bs.dropdown',function(){
        console.log('show');
        spacer.show();
    });
    navList.on('hide.bs.dropdown',function(){
        console.log('hide');
        spacer.hide();
    });
});

Let me know if it's the behavior you expected.

Thanks