0

i use jquery slide toggle to show/hide a div when a bttn clicked. Is it possible to place the div IN THE BUTTON ? (I need this for beeing able to stick the navigation properly on the top of the page which is for mobile devices.)

The HTML

<div class="medianavbttn">Show Menu</div>

<div class="medianav">
    <ul id="medianav-links">
        <li class="current"><a href="#section1">About</a></li>
        <li><a href="#section2">Gallery Photos</a></li>
        <li><a href="#section3">Contact</a></li>
    </ul>
</div>

The Script

<script>
$(".medianavbttn").on("click", function(){
    $(".medianav").slideToggle("slow");
    $(this).text($(this).text() == "Show Menu" ? "Hide Menu" : "Show Menu");
});
</script>

The CSS

.medianavbttn {
position: relative;
display:block;
width: 100%;
height: 30px;
top: 0;
left: 0;
cursor: pointer;
}

.medianav {
position: relative;
display: none;
width: 100%;
}
Igor Laszlo
  • 714
  • 9
  • 31
  • Could you clarify about *in* the button? Would on-top of the button suffice? – Anthony Forloney Oct 05 '13 at 01:25
  • 1
    You don't have a button in your HTML, you click on a DIV. You can certainly have one DIV inside another DIV. – Barmar Oct 05 '13 at 01:27
  • you say that you want these to stick to the top of a page, so I guess the `div`s can be wrapped in another `div` so that it is easier to control them as a unit – GuiDocs Oct 05 '13 at 01:43
  • Thanks for you all your questions and answers... see my solution here below, answered by Kevin Pei ! – Igor Laszlo Oct 05 '13 at 11:01

1 Answers1

0

Is this what you're looking for?
JsFiddle:http://jsfiddle.net/GGtkc/
HTML:

<div class="medianavbttn">
    <span class="showbutton">Show Menu</span>

<div class="medianav">
    <ul id="medianav-links">
        <li class="current"><a href="#section1">About</a></li>
        <li><a href="#section2">Gallery Photos</a></li>
        <li><a href="#section3">Contact</a></li>
    </ul>
</div>
</div>

JS:

$(".medianavbttn").on("click", function(){
    $(".medianav").slideToggle("slow");
    $(this).find('.showbutton').text($(this).find('.showbutton').text() == "Show Menu" ? "Hide Menu" : "Show Menu");
});
Kevin Pei
  • 5,800
  • 7
  • 38
  • 55
  • This is exactly what i was looking for, thanks a lot ! You can see it here : http://igorlaszlo.com/mobile.html (you must resize the browser window to min 320 x 480 px as it is for mobile devices - small screens). I wanted to vote for your answer but i do not have enough reputation to do it... One thing has remained, i must check if the sticky effect works on mobiles or not :) – Igor Laszlo Oct 05 '13 at 10:59