JQuery простое меню слайдов не работает

Question

Я пытаюсь заставить это меню панели работать. Я работаю над этим часами без каких-либо успехов. Я частично работаю. См. Скрипку here.

То, что я пытаюсь сделать, это:

1. При нажатии кнопки цель 1, цель 2, задача 3 ссылки. Дивер, удерживающий эти ссылки, должен выскользнуть. Прямо сейчас, это только покрывается и скрывается следующим div, который скользит. Я хотел бы, чтобы он скользил сначала влево, а затем после этого включался следующий div.

2. После нажатия одной из целевых ссылок. Затем, щелкнув ссылку «Главное меню», сделайте «целевое» поле ниже (зеленые, красные, желтые) выскользнуть справа налево и иметь «целевое меню», которое загружает изначально, скользить слева. Прямо сейчас, я не могу получить ссылку «главного меню», чтобы что-то сделать. При щелчке по нему следует отображать начальное целевое меню.

Я знаю, что там много правых и левых вещей. Но я хотел быть как можно более конкретным. Меня не волнует направление слайда. Я больше обеспокоен только тем, чтобы он работал первым.

<div class="main-menu"><a href="#target0">Main Menu Link</a> 
</div> 

<div id="right" id="target0"> 
This is the Target Menu<br /> 
<a href="#target1" class="panel">Target 1</a><br/> 
<a href="#target2" class="panel">Target 2</a><br/> 
<a href="#target3" class="panel">Target 3</a><br/> 

<div class="panel" id="target1" style="background:green">Target 1</div> 
<div class="panel" id="target2" style="background:red">Target 2</div> 
<div class="panel" id="target3" style="background:yellow">Target 3</div> 
</div> 

Answer 1

# target0 является весь ваш элемент (он содержит Target1 TARGET2 и target3)

Вы должны разбить его на свой собственный:

<div class="main-menu"><a href="#target0" class="panel">Main Menu Link</a> 
</div> 
<div id="right" id="main"> 
    <div id="target0" class="panel active">This is the Target Menu<br /> 
     <a href="#target1" class="panel">Target 1</a><br/> 
     <a href="#target2" class="panel">Target 2</a><br/> 
     <a href="#target3" class="panel">Target 3</a><br/> 
    </div> 
    <div class="panel" id="target1" style="background:green">Target 1</div> 
    <div class="panel" id="target2" style="background:red">Target 2</div> 
    <div class="panel" id="target3" style="background:yellow">Target 3</div> 
</div> 

EDIT: Чтобы сделать серый блок slide, вы должны добавить к нему свой класс Panel (я также добавил активный класс, чтобы он отображался по умолчанию). Вам просто нужно будет стилизовать его

div.panel.active { 
    display:block; 
}