load content within one div using jquery

Vote count:

0

I imagine this is an easy question but cant quite get the answer i need from typical google searches. Hoping i can achieve this without needing to use Ajax, hoping to use basic jQuery.

I have a list navigation (aside Nav), which when a link is clicked, displays the content to the left. I know within the css i will need to display: none to certain divs. Currently the code:

html

<section id="main"> 
    <section class="container">

        <aside>
            <ul id="nav">
                <li><a href="#" id="link1">link 1</a></li>
                <li><a href="#" id="link1">link 2</a></li>
                <li><a href="#" id="link1">link 3</a></li>
            </ul>
        </aside>

    <div id="link1">
        <p>Content</p>
    </div>

    <div id="link2">
        <p>Content</p>
    </div>

    <div id="link3">
        <p>Content</p>
    </div>

    </section>
</section>

I want the user to be able to toggle between the links to fade in and fade out without the whole page refreshing too.

Feel free to link this to tutorials if you know of any good ones.

cheers,

asked 1 min ago

user3523010

5

load content within one div using jquery