Difficulty targeting elements in collapsible bootstrap navbar

i’ve got a bootstrap navbar that has 2 collapsible toggle buttons. on small screens, when the 1st one is clicked it shows/hides an unordered list / dropdown menu; when the 2nd one is clicked it shows/hides a search box & submit button. this jsfiddle shows what happens.

there is actually a problem with the code even here (even though this isn’t the main problem); if you reduce the width of the browser & click either of the toggle buttons you’ll see that the dropdown menu’s (i’m calling them ‘uncollapsed menus’) that appear only take up half the screen. so if anyone knows how to (a) target these dropdown elements & (b) assign them appropriate CSS so that they span the full width pls say

the main problem is a little trickier. on this page you’ll see i’ve tried to applied the solution in the fiddle to an actual website. & in this case you’ll see that if you reduce the screen width & click both toggle buttons you can actually get both (un)collapsed menu’s on the screen at once. definitely not what is desired!!!

the failure here seems to be in the following bit of code that supposedly says, IF (there’s already one uncollapsed menu visible) THEN (collapse it before uncollapsing the other one). i think

the following bit of code is the bit in the javascript box in the jsfiddle, except i’ve modified it slightly to display the value of actives.length to the console (as i think this is where its falling down). if you watch firebugs console when you click one then both of the toggle buttons for the www.passpaeds.com/y/ site u may be able to spot what i’m not doing (cross fingers)

$('.navbar').on('show.bs.collapse', function () {
    var actives = $(this).find('.collapse.in'),
        hasData;
    console.log(actives.length);

    if (actives && actives.length) {
        console.log("if one menu is visible shouldn't actives.length=1??  meaning this should show??");
        hasData = actives.data('collapse');
        if (hasData && hasData.transitioning) return;
        actives.collapse('hide');
        hasData || actives.data('collapse', null);
    }
});

anyway, got me stumped this has. any help much appreciated

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.