Off-canvas Foundation 6

Question

I'm new in javascript development and I don't know too much Jquery library. I've this off-canvas structure and I'd like to hide the content of divs that aren't selected. How can accomplish this using Jquery?

<div class="off-canvas-wrapper">
   <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
        <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
            <ul class="vertical menu" id="canvasMenu">
                <li><a class="text-center"  href="#div1">ONE</a></li>
                <li><a class="text-center"  href="#div2">TWO</a></li>
                <li><a class="text-center"  href="#div3">THREE</a></li>
                <li><a class="text-center"  href="#div4">FOUR</a></li>
                <li><a class="text-center"  href="#div5">FIVE</a></li>
            </ul>
        </div>
        <div class="off-canvas-content" data-off-canvas-content>
            <div class="content">
                <div id="#div1">
                    <p>CONTENT DIV ONE</p>
                </div>
                <div id="div2">
                    <p>CONTENT DIV TWO</p>
                </div>
                <div id="div3" >
                    <p>CONTENT DIV THREE</p>
                </div>
                <div id="div4">
                    <p>CONTENT DIV FOUR</p>
                </div>
                <div id="div5">
                    <p>CONTENT DIV FIVE</p>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

There are a lot of ways to go about it. jQuery hide and show methods are used in this simple example.

<script type="text/javascript">
    function showElem(id) {
        // first hide the contents
        hideElems();

        // now show the element chosen
        $("#" + id).show();
    }

    function hideElems() {
        $("#div1").hide();
        $("#div2").hide();
        $("#div3").hide();
        $("#div4").hide();
        $("#div5").hide();
    }

</script>

<ul class="vertical menu" id="canvasMenu">
    <li onclick="showElem('div1');">ONE</li>
    <li onclick="showElem('div2');">TWO</li>
    <li onclick="showElem('div3');">THREE</li>
    <li onclick="showElem('div4');">FOUR</li>
    <li onclick="showElem('div5');">FIVE</li>
</ul>
<div class="content">
    <p>*** content starts here ***</p>
    <div id="div1">
        <p>CONTENT DIV ONE</p>
    </div>
    <div id="div2">
        <p>CONTENT DIV TWO</p>
    </div>
    <div id="div3" >
        <p>CONTENT DIV THREE</p>
    </div>
    <div id="div4">
        <p>CONTENT DIV FOUR</p>
    </div>
    <div id="div5">
        <p>CONTENT DIV FIVE</p>
    </div>
    <p>*** content ends here ***</p>
</div>
<script type="text/javascript">
    hideElems();
</script>