Question

I’m trying to make a dynamic nav so when an nav item is clicked it shows elements with the same class as nav value.

Jquery:

$('section nav a').on({
        click: function() {
            var navElement = $(this).val();
            if ( $('article').attr('class') != navElement ) {
        $(this).hide();
            }
    }
});

Html:

<section>
    <div class="inside">
        <nav> 
<a href="#" title="typografi&ombrydning">Typografi & Ombrydning</a> 
<a href="#" title="grafiskdesign">Grafisk design</a> 
<a href="#" title="grafik&billeder">Grafik & Billeder</a> 
<a name="Workflow" class="workflow" title="workflow" href="#">Workflow</a> </nav>
        <article class="typografi&ombrydning workflow"> <img src="images/imgtest.jpg" width="230" height="210">
            <h2>Aphyxion</h2>
            <p class="time">Marts 15, 2012</p>
            <p>Billeder fra koncerten med aphyxion og molested på elværket i helsingør</p>
            <a class="read_more" href="#">Læs mere...</a> </article>
        <article class="grafik&billeder"> <img src="images/imgtest.jpg" width="230" height="210">
            <h2>Aphyxion</h2>
            <p class="time">Marts 15, 2012</p>
            <p>Billeder fra koncerten med aphyxion og molested på elværket i helsingør</p>
            <a class="read_more" href="#">Læs mere...</a> </article>
        <article class="workflow"> <img src="images/imgtest.jpg" width="230" height="210">
            <h2>Aphyxion</h2>
            <p class="time">Marts 15, 2012</p>
            <p>Billeder fra koncerten med aphyxion og molested på elværket i helsingør</p>
            <a class="read_more" href="#">Læs mere...</a> </article>
        <article class="grafiskdesign grafik&billeder"> <img src="images/imgtest.jpg" width="230" height="210">
            <h2>Aphyxion</h2>
            <p class="time">Marts 15, 2012</p>
            <p>Billeder fra koncerten med aphyxion og molested på elværket i helsingør</p>
            <a class="read_more" href="#">Læs mere...</a> </article>
        <article class="workflow"> <img src="images/imgtest.jpg" width="230" height="210">
            <h2>Aphyxion</h2>
            <p class="time">Marts 15, 2012</p>
            <p>Billeder fra koncerten med aphyxion og molested på elværket i helsingør</p>
            <a class="read_more" href="#">Læs mere...</a> </article>
        <div class="clear"></div>
    </div>
</section>

But i cant get it to work
Can you guys please help.

Best Regards

Answer 1

I am not sure if this is what you are looking for? Are you trying to show contents based on the navigation element clicked. If so take a look here? http://jsfiddle.net/cQt5p/. I would personally use data attributes as opposed to using classes to show and hide related elements.