How to make accordian menu open with button click?

Question

I want to open a accordion menu when 'More' button clicked. I have tried but it showing the accordion in first state and when I'm click the button it collapse. What I want is to open the accordian with button clicked and first state it should close.

Please guide me

<input id="hide" value="+" src="./img/Mainpage-more-icon.png" type="button" /><br/>
<div id="rightMenu">
    <ul>
        <li>sss</li>
        <li>sss</li>
        <li>sss</li>
    </ul>
</div>
<script>
    $(document).ready(function() {
        $('#hide').click(
                function() {
                    //show its submenu
                    $("#rightMenu").stop().slideToggle(500);
                }
        );
    });
</script>

Answer 1

You can add this to your ready

$("#rightMenu").hide();

Or set it's css style to display:none

Answer 2

You just need to call $("#rightMenu").hide() ... or hide it with css

see this codepen: http://codepen.io/nathamanath/pen/bwJKn

Answer 3

Set display:none in css

<input id="hide" value="+" src="./img/Mainpage-more-icon.png" type="button" /><br/>
<div id="rightMenu" style="display:none;">
<!--------------------^-------^--------->   
    <ul>
        <li>sss</li>
        <li>sss</li>
        <li>sss</li>
    </ul>
</div>
<script>
    $(document).ready(function() {
    $('#hide').click(
            function() {
                //show its submenu
                $("#rightMenu").stop().slideToggle(500);
            }
       );
  });
</script>

FIDDLE

or you can hide that using jquery when the dom is ready,using hide() method

<input id="hide" value="+" src="./img/Mainpage-more-icon.png" type="button" /><br/>
<div id="rightMenu">
    <ul>
        <li>sss</li>
        <li>sss</li>
        <li>sss</li>
    </ul>
</div>
<script>
    $(document).ready(function() {
    $("#rightMenu").hide();
    $('#hide').click(
            function() {
                //show its submenu
                $("#rightMenu").stop().slideToggle(500);
            }
       );
  });
</script>

FIDDLE

Answer 4

Make it slideToggle in the beginning.

Check this fiddle

$('#rightMenu').stop().slideToggle(500);
$('#hide').click(
    function () {
        //show its submenu
        $("#rightMenu").stop().slideToggle(500);    
    }
);

And please, I don't even know full JQuery, but it's simple knowledge that you can maybe find on Google.