CODEWITHSUNDEEP
javascriptjqueryhtml
user2735570
user2735570

Reputation: 3

How to use the toggle function click open and close yet close menu when one selected

After searching through various tutorials i found something that almost fits my needs but i'm having trouble getting the menu to function how i really would like it too.

I set up a jsfiddle to show my efforts, i'm not very good at this even though i'm trying my best to understand.

http://jsfiddle.net/HZksH/2/

I would like some help on how i can get this menu , when in default to always show the content1 area, then if you toggle open the "Open/Close" buttom and menu1,menu2,menu3 appear , when i select any of the 3 , the content replaces the content1 and then closes the menu again

any ideas would be appreciated

<div class="menu">
    <div class="submenu" id="menu" data-content="sort">menu1</div>
    <div class="content" id="sort">content1</div>
    <div class="submenu" id="menu1" data-content="1sort">menu2</div>
    <div class="content" id="1sort">content2</div>
    <div class="submenu" id="menu2" data-content="sort2">menu3</div>
    <div class="content" id="sort2">content3</div>
</div>

$(document).ready(function() {
    $('.menu').hide().before('<a href="#" id="toggle-menu" class="button">Open/Close</a>');

    $('a#toggle-menu').click(function() {
        $('.menu').slideToggle(1000);
        return false;
    });    

    $('.content').hide();
    $('.submenu').click(function(){
        $('.content:visible').hide('fast');
        $('#' + $(this).data('content')).show('fast');
    });
});

Upvotes: 0

Views: 3616

Answers (1)

Maverick
Maverick

Reputation: 478

Here refer to this fiddle: http://jsfiddle.net/HZksH/3/

I have modified your js a bit

$(document).ready(function() {
    $('.menu').hide().before('<a href="#" id="toggle-menu" class="button">Open/Close</a>');
    $('a#toggle-menu').click(function() {
        $('.menu').slideToggle(1000);
        return false;
    });    
//$('.content').hide();
$('.submenu').click(function(){
    $('.content:visible').hide('fast');
    $('#' + $(this).data('content')).show('fast');
    $('.menu').slideToggle(1000);
});
});

I hope it solves your problem

Upvotes: 1

Related Questions