I am working with BootStrap 3 CSS styling and have created the following:

<div class="navbar-header">
    <button type="button" class="navbar navbar-default" role="navigation">
        <span class="sr-only">Toggle navigation></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button> 
    <a class="navbar-brand" href="#home">Home</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
                <ul class="nav navbar-nav">
                       <li><a href="#mywork" onclick="return show_div('mywork');">My Work</a></li>
                       <li><a href="#myprofile">Profile</a></li>
                       <li class="dropdown">
                           <a href="#other" data-toggle="dropdown" class="dropdown-toggle">Other actions <b class="caret"></b></a>
                           <ul class="dropdown-menu">
                               <li><a href="#contactme">Contact Me</a></li>
                           </ul>
                       </li>
                </ul>

                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                                <a href="#actions" data-toggle="dropdown" class="dropdown-toggle">Actions <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#updateprofile">Update profile</a></li>
                                    <li><a href="#logout">Logout</a></li>
                                </ul>
                        </li>
                </ul>
        </div>
</div>

<div id="home" style="display: none;">
    Test Data
</div>

And from this I am trying to display the div at the bottom which I have given the id "home" which corresponds to the #home href given on the nav bar.

The trouble I am having is that I cannot show the div with the id of home when the Home element of the navbar is clicked, am I doing something wrong or can someone point me in the right direction? I have spent a lot of time trying to work this out but cannot.

EDIT:

JavaScript show_div function:

<script>
    //Functon to show divs from the nav menu
    function show_div(toShow)
    {
        var show = document.getElementById(toShow);
        show.style.display = "";
    }
</script>

I am working with BootStrap 3 CSS styling and have created the following:

<div class="navbar-header">
    <button type="button" class="navbar navbar-default" role="navigation">
        <span class="sr-only">Toggle navigation></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button> 
    <a class="navbar-brand" href="#home">Home</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
                <ul class="nav navbar-nav">
                       <li><a href="#mywork" onclick="return show_div('mywork');">My Work</a></li>
                       <li><a href="#myprofile">Profile</a></li>
                       <li class="dropdown">
                           <a href="#other" data-toggle="dropdown" class="dropdown-toggle">Other actions <b class="caret"></b></a>
                           <ul class="dropdown-menu">
                               <li><a href="#contactme">Contact Me</a></li>
                           </ul>
                       </li>
                </ul>

                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                                <a href="#actions" data-toggle="dropdown" class="dropdown-toggle">Actions <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#updateprofile">Update profile</a></li>
                                    <li><a href="#logout">Logout</a></li>
                                </ul>
                        </li>
                </ul>
        </div>
</div>

<div id="home" style="display: none;">
    Test Data
</div>

And from this I am trying to display the div at the bottom which I have given the id "home" which corresponds to the #home href given on the nav bar.

The trouble I am having is that I cannot show the div with the id of home when the Home element of the navbar is clicked, am I doing something wrong or can someone point me in the right direction? I have spent a lot of time trying to work this out but cannot.

EDIT:

JavaScript show_div function:

<script>
    //Functon to show divs from the nav menu
    function show_div(toShow)
    {
        var show = document.getElementById(toShow);
        show.style.display = "";
    }
</script>

• javascript
• html
• twitter-bootstrap

Share Improve this question Follow edited Jul 2, 2015 at 8:49 Siguza 24k66 gold badges5555 silver badges9999 bronze badges asked Apr 5, 2015 at 15:01 user3707078user3707078 5

• Show us the javascript. Where's the implementation of show_div? – Moataz Elmasry Commented Apr 5, 2015 at 15:06
• 1 I have added the show_div function, this is something I thought might work although it has proven not to – user3707078 Commented Apr 5, 2015 at 15:11
• 1 Apologies that I forgot to add the JS – user3707078 Commented Apr 5, 2015 at 15:14
• 2 Your anchor tag has a onclick event but you are passing the ID of mywork... I seen no elements with the id of mywork Change the onclick event call to onclick="show_div('home');" and see if your div with the Test Data appears. – NewToJS Commented Apr 5, 2015 at 15:15
• 1 @NewToJS, that has worked! That was a stupid mistake on my park, can you add that as an answer so I can mark it as correct? – user3707078 Commented Apr 5, 2015 at 15:17

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Why you don't want to use jQuery like this:

<a id="sh" style="cursor:pointer">Show Home</a>
<div id="home" style="display: none;">Test Data</div>

<script type="text\javascript">
$(document).ready(function () {
    $("#sh").click(function () {
        $("#home").toggle();
    });
});
</script>

Your anchor onclick event is sending the wrong id

<li><a href="#mywork" onclick="return show_div('mywork');">My Work</a></li>

It should be sending home to target the div tag with your test data:

<div id="home" style="display: none;">
    Test Data
</div>

Change the onclick to:

<li><a href="#mywork" onclick="show_div('home');">My Work</a></li>

I hope this helps. Happy coding!