Question

with reference to the topic here

I’m using this template here to build my site //link

on the right there is a javascript which shows the different list items

I’m trying to create two lists. The user can click on a link at the top and choose the list he wants to see.

The code is something like this

<div id="right-column">

<a href="#" onclick="toggleVisibility('x');">X</a>

<a href="#" onclick="toggleVisibility('Y');">Y</a>

<div id="x" class="section">
<ul id="portfolio">
<li>...</li>
<li>...</li>
</ul>
</div>

<div id="y" class="section" style="display:hide">
<ul id="portfolio">
<li>...</li>
<li>...</li>
</ul>
</div>

</div>

the jquery

$(document).ready(
                function(){
                    $('#news').innerfade({
                        animationtype: 'slide',
                        speed: 750,
                        timeout: 2000,
                        type: 'random',
                        containerheight: '1em'
                    });
                    
                    $('ul#portfolio').innerfade({
                        speed: 1000,
                        timeout: 5000,
                        type: 'sequence',
                        containerheight: '220px'
                    });
                    
                    $('.fade').innerfade({
                        speed: 1000,
                        timeout: 6000,
                        type: 'random_start',
                        containerheight: '1.5em'
                    });
                    
                    $('.adi').innerfade({
                        speed: 'slow',
                        timeout: 5000,
                        type: 'random',
                        containerheight: '150px'
                    });
            }); 

function toggleVisibility(newSection) {
    $(".section").not("#" + newSection).hide();
    $("#" + newSection).show();
}

the visibility code works fine..

my problems are:

1 the slider doesnt work for the second list

2 when I click on ‘Y’ to display the second list the text in the divs below get pushed down

please help..

Answer 1

The duplicate Id’s on your lists will break js behavior:

<ul id="portfolio">

on each list will not work right, Id’s need to be unique per page