Несколько jQuery раздвижных контейнеров контента

Question

jQuery начинающий здесь.

Я работаю над сайтом с двумя ссылками. Каждая ссылка выводит содержимое div с содержимым ниже. Проблема, с которой я сталкиваюсь, заключается в том, что я не могу понять, как переключаться между ними, когда пользователь нажимает на другую ссылку.

Поэтому, когда пользователь нажимает кнопку LINK-A, он вытесняет CONTENT-A, а CONTENT-A показывает, будет ли пользователь нажимать LINK-B CONTENT-A, чтобы он скользил назад до того, как CONTENT-B сдвинется.

Надеюсь, что это имеет смысл, действительно надеюсь, что кто-то может мне помочь!

Answer 1

HTML--

<a href="#" id="link-a">Link A</a> - <a href="#" id="link-b">Link B</a> 
<div id="container"> 
    <div id="content-a">Content A</div> 
    <div id="content-b">Content B</div> 
</div> 

CSS--

Каждый content ДИВ абсолютно позиционирован внутри container DIV так что он может быть анимированы и вне поля зрения:

#container { 
    position : relative; 
    width : 500px; 
    height : 200px; 
} 
#content-a { 
    position : absolute; 
    top  : 0; 
    left  : 0; 
    width  : 100%; 
    height  : 100%; 
    background : red; 
} 
#content-b { 
    position : absolute; 
    top  : 0; 
    left  : -100%; 
    width  : 100%; 
    height  : 100%; 
    background : green; 
} 

JS--

//cache the content area selectors since they will be used multiple times 
var $content_a = $('#content-a'), 
    $content_b = $('#content-b'); 

$('#link-a').on('click', function() { 

    //when the `a` link is clicked, animate `b` content off-screen 
    $content_b.stop().animate({ 
     left : '-100%' 
    }, 500, function() { 

     //then animate the `a` content on-screen after the `b` content's animation completes 
     $content_a.stop().animate({ 
      left : 0 
     }, 500); 
    }); 
}); 

//then do the same (but in reverse) for the `b` link 
$('#link-b').on('click', function() { 
    $content_a.stop().animate({ 
     left : '-100%' 
    }, 500, function() { 
     $content_b.stop().animate({ 
      left : 0 
     }, 500); 
    }); 
}); 

Демо-версия: http://jsfiddle.net/4eN84/

Answer 2

Ahhh-hah, не видя вашего кода. Я думаю, вы можете найти использование в селекторе .not. http://api.jquery.com/not-selector/

$("#foo .bar").not(this).hide(); 

Это будет в основном захватить что-нибудь, НО вещь, которую вы передать его, а затем делать все, что ему (в данном случае скрываются). Самое приятное в этом заключается в том, что это делает так, что ваш пользовательский интерфейс расширяемый, если вы планируете позже добавить несколько панелей/окон.

Надеюсь, вам доставят вас туда, куда вам нужно. :)

Answer 3

Вам просто нужен базовый аккордеон.

HTML ...

<a href="#sectA" class="slider">A header for content a</a> 
<div id="sectA">Some content A here</div> 

<a href="#sectB" class="slider">A header for content b</a> 
<div id="sectB">Some content B here</div> 

CSS ...

.opened { display: block; } 
div { display: none; height: 200px; background: #600; } 
a { display: block; } 

JQuery ...

$(".slider").click(function() { 
      var dropD = $(this).attr("href"); 
      if ($("div#" + dropD + " .opened").length) { 
       $("div.opened").slideToggle(300).removeClass("opened"); 
      } else { 
       $("div.opened").slideToggle(300).removeClass("opened"); 
       $("div#" + dropD).slideToggle(300).addClass("opened"); 
      } 
     return false; 
     }); 

jfiddle example HERE

Answer 4

Здесь хорошее решение:

DEMO IN ACTION

HTML:

<h2 class="button">Open 1</h2> 
    <div class="box">Box 1</div> 

    <h2 class="button">Open 2</h2> 
    <div class="box">Box 2</div> 

    <h2 class="button">Open 3</h2> 
    <div class="box">Box 3</div> 

JQ:

$('.box').hide(); 

$('.button').click(function(){ 
    var box = $(this).next(); 
    box.is(':visible') ? box.slideToggle() : ($('.box').slideUp(), box.slideDown()); 
}); 

Просто, чтобы объяснить тройных операторов:

statement ? isTrue : isFalse ;

Как вы можете видеть, он переключает уже открыл коробки, а также - скрывает открываемый, если вы снова нажмите на нее!