Javascript/HTML -两个不同列表的滑块

参考此处的主题

我正在使用这个模板来建立我的网站//link

右边有一个javascript显示了不同的列表项

我正在尝试创建两个列表。用户可以点击顶部的链接，选择他想看的列表。

代码是这样的

<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>

$(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();
}

可见性代码工作正常..

我的问题是:

1滑块对第二个列表不起作用

2当我点击"Y"来显示第二个列表时，下面div中的文本被向下推

请帮. .