Jquery Slide Toggle

Question

По сути, я пытаюсь добиться эффекта слайд-тумблера, но не совсем.

Например, у меня есть div с высотой 200 пикселей и якорь с вложенным тегом img. Когда пользователь нажимает на изображение, div увеличивается до высоты 500 пикселей и отображает вложенный контент, который находится в пределах ul.

Чтобы закрыть div, внизу справа есть значок закрытия, который является якорем, содержащим фоновое изображение. При нажатии элемент div вернется на прежнюю высоту 200 пикселей.

Все предложения приветствуются

Вот мой HTML, чтобы помочь:

Спасибо

Jordy

Answer 1

Использование jQuery:

var $getStarted = $('#getstarted');
$('#open img').click(function(){
  if($getStarted.hasClass('opened')) {
    $('#close').trigger('click');
  } else {
     $getStarted.animate({height:'+=300px'},500,function(){
      // you're open
        $getStarted.addClass('opened');
     });
  }
  return false;
});
$('#close').click(function(){
  if($getStarted.hasClass('opened')) {
    $getStarted.animate({height:'-=300px'},500,function() {
      // you're closed again
       $getStarted.removeClass('opened');
    });
  }
  return false;
});

Как насчет этого?

Пример здесь: http://jsfiddle.net/huF73/

Спасибо, MyStream

Answer 2

Попробуйте это: JQuery:

$(document).ready(function() {
    $("div.panel_button").click(function(){
        $("div#panel").animate({
            height: "100%"
        })
                $("div#main").hide();



    }); 

   $("div#hide_button").click(function(){
        $("div#panel").animate({
            height: "0px" 
        }, "fast");
                $("div#content").show();


   });  

});

Кстати, для вышеизложенного вы можете изменить значение высоты на желаемое значение.

CSS:

.panel_button1 a {
YOUR STYLING HERE } /* for the exit button */

.panel_button {
width: YOUR VALUE HERE;
position: relative; } /* for the activation button styling */

.panel_button a {
YOUR STYLING HERE }
/* for the activation button styling */

#panel {
position: fixed;
width: VALUE OF YOUR CHOICE;
height: 0%; /*THIS CANNOT CHANGE UNLESS YOU WANT IT TO START AT A SPECIFIC HEIGHT. IF YOU WANT IT HIDDEN, DO NOT CHANGE IT*/ 
overflow: hidden;
z-index: 25;
background-color: COLOUR OF YOUR CHOICE;
} /* drop down colour */

#panel_contents {
height: VALUE OF YOUR CHOICE;
width: VALUE OF YOUR CHOICE;
position: absolute;
    z-index: 999; } /* drop down text */

#content {
CONTENT STUFF HERE }

Применение:

Activation: <br> <div class="panel_button" style="display: visible;"><a href="#panel">blahblahblah</a></div>

Кнопка «Содержимое и выход»:

 <div id="panel"> 
<div class="panel_button1" id="hide_button" style="display: visible;"><a href="#">EXIT BUTTON TEXT OR STUFF.</a></div>
  <div id="panel_contents">
WHAT YOU SEE WHEN THIS THING DROPS DOWN. LIKE TEXT STUFF. 
</p>
</div> 
</div></div>

Answer 3

тумблер (); Или, если вы хотите, чтобы он был немного короче:

function toggle(elm)
{
    var height = document.getElementById(elm);
    if(height == 200) {
        elem.style.height = 500;
    }

    if(height == 500) {
        elem.style.height = 200;
    }
    return false;
}

Вы можете использовать эту функцию с помощью onclick = "toggle ('yourElementToToggle')" тега

Надеюсь, это поможет

Answer 4

Вот некоторый код, который я использую в ситуации часто задаваемых вопросов, но работает именно так, как вы описываете.

jQuery:

<script type="text/javascript">
    function ToggleFAQ(faq) {
        $("#faq" + faq).slideToggle(500);
    }
</script>

HTML:

<a href="javascript:void(0)" onclick="ToggleFAQ('1')">QUESTION HERE</a>
<div id="faq1">
    <p>
        ANSWER HERE
    </p>
    <p>
        <a href="javascript:void(0)" onclick="ToggleFAQ('1')">- Hide</a>
    </p>
</div>

Div, содержащий ответ (faq1), скрыт с самого начала.Вы можете установить класс или, как хотите, спрятать его в начале.

Удачи!