Show Hide Div Menu Responsive

Question

I have a problem using show/hide div and it works well on desktop view.

jQuery.noConflict();
(function( $ ) {
    $(function() {
            // Optional code to hide all divs
            $("#section-intro").show();
            $("#section-about-us").hide();
            $("#section-what-we-do").hide();
            $("#section-oil-gas").hide();
            $("#section-infrastructure").hide();
            $("#section-mining").hide();
            $("#section-constructions").hide();
            $("#section-logistics").hide();
            $("#section-main-services").hide();
            $("#section-business-approach").hide();
            $("#section-resources").hide();
            $("#section-contact-us").hide();
            // Show chosen section from menu, and hide all others sections
            $('.hidecontent').click(function(){
                jQuery('.showHideDiv').hide();
                var id = $(this).attr("href");
                $(id).show();
            });
            // Show chosen section from intro, and hide all others sections
            $('.footerlinks a').click(function(){
                jQuery('.showHideDiv').hide();
                var id = $(this).attr("href");
                $(id).show();
            });
   });
})(jQuery);

I have added a class in a Wordpress menu ".hidecontent" and it gets the href url "#somediv" and displays that and hides the previous section. It works well.

Problem is when it gets to tablet/mobile view it doesn't work anymore.

My logic is saying that it has something to do with the responsive mobile view when you have to press the button and dropdown shows but I cannot figure it out. I have tried every class and nothing works and it should work anyway.

Anybody have an idea about it? I have tried for the last few hours to get this working.

You can see it live here: http://euro.greekmedia.ro/

Thank you.

//EDIT HTML

<div id="et-top-navigation" data-height="65" data-fixed-height="40" style="padding-left: 238px;">
<nav id="top-menu-nav">
    <ul id="top-menu" class="nav">
        <li id="menu-item-46532" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46532"><a class="hidecontent" href="#section-about-us">About us</a>
        </li>
        <li id="menu-item-46533" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46533"><a class="hidecontent" href="#section-what-we-do">What we do</a>
        </li>
        <li id="menu-item-46534" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-46534"><a href="#">Industries</a>
            <ul class="sub-menu">
                <li id="menu-item-46535" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46535"><a class="hidecontent" href="#section-oil-gas">Oil &amp; Gas</a>
                </li>
                <li id="menu-item-46536" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46536"><a class="hidecontent" href="#section-infrastructure">Infrastructure</a>
                </li>
                <li id="menu-item-46537" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46537"><a class="hidecontent" href="#section-mining">Mining</a>
                </li>
                <li id="menu-item-46604" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46604"><a class="hidecontent" href="#section-constructions">Constructions</a>
                </li>
                <li id="menu-item-46603" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46603"><a class="hidecontent" href="#section-logistics">Logistics</a>
                </li>
            </ul>
        </li>
        <li id="menu-item-46538" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46538"><a class="hidecontent" href="#section-main-services">Main services</a>
        </li>
        <li id="menu-item-46539" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46539"><a class="hidecontent" href="#section-business-approach">Business approach</a>
        </li>
        <li id="menu-item-46541" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46541"><a class="hidecontent" href="#section-resources">Resources</a>
        </li>
        <li id="menu-item-46542" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46542"><a class="hidecontent" href="#section-contact-us">Contact</a>
        </li>
    </ul>
</nav>




<div id="et_mobile_nav_menu">
    <div class="mobile_nav closed">
        <span class="select_page">Select Page</span>
        <span class="mobile_menu_bar mobile_menu_bar_toggle"></span>
        <ul id="mobile_menu" class="et_mobile_menu">
            <li id="menu-item-46532" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46532 et_first_mobile_item"><a class="hidecontent" href="#section-about-us">About us</a>
            </li>
            <li id="menu-item-46533" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46533"><a class="hidecontent" href="#section-what-we-do">What we do</a>
            </li>
            <li id="menu-item-46534" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-46534"><a href="#">Industries</a>
                <ul class="sub-menu">
                    <li id="menu-item-46535" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46535"><a class="hidecontent" href="#section-oil-gas">Oil &amp; Gas</a>
                    </li>
                    <li id="menu-item-46536" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46536"><a class="hidecontent" href="#section-infrastructure">Infrastructure</a>
                    </li>
                    <li id="menu-item-46537" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46537"><a class="hidecontent" href="#section-mining">Mining</a>
                    </li>
                    <li id="menu-item-46604" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46604"><a class="hidecontent" href="#section-constructions">Constructions</a>
                    </li>
                    <li id="menu-item-46603" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46603"><a class="hidecontent" href="#section-logistics">Logistics</a>
                    </li>
                </ul>
            </li>
            <li id="menu-item-46538" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46538"><a class="hidecontent" href="#section-main-services">Main services</a>
            </li>
            <li id="menu-item-46539" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46539"><a class="hidecontent" href="#section-business-approach">Business approach</a>
            </li>
            <li id="menu-item-46541" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46541"><a class="hidecontent" href="#section-resources">Resources</a>
            </li>
            <li id="menu-item-46542" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46542"><a class="hidecontent" href="#section-contact-us">Contact</a>
            </li>
        </ul>
    </div>
</div>

Answer 1

would you like to give me the html to see better the panorama

so I see these happening as id the href but you need the # so jquery recognizes it

something like that

jQuery.noConflict();
(function( $ ) {
 $(function() {
        // Optional code to hide all divs
        $("#section-intro").show();
        $("#section-about-us").hide();
        $("#section-what-we-do").hide();
        $("#section-oil-gas").hide();
        $("#section-infrastructure").hide();
        $("#section-mining").hide();
        $("#section-constructions").hide();
        $("#section-logistics").hide();
        $("#section-main-services").hide();
        $("#section-business-approach").hide();
        $("#section-resources").hide();
        $("#section-contact-us").hide();
        // Show chosen section from menu, and hide all others sections
        $('.hidecontent').click(function(){
            jQuery('.showHideDiv').hide();
            var id = $(this).attr("href");
            $('#'+id).show();
        });
        // Show chosen section from intro, and hide all others sections
        $('.footerlinks a').click(function(){
            jQuery('.showHideDiv').hide();
            var id = $(this).attr("href");
            $('#'+id).show();
        });

}); })(jQuery);