CODEWITHSUNDEEP
jqueryhtmlcss
Carl0s1z
Carl0s1z

Reputation: 4723

jQuery - slide will open but doesn't close

I have a jQuery code that when a user clicks on the <h2> title it opens a div with its content inside.

Html code:

<div class="content1">
    <h2 class="vertical"> open text box</h2>
</div>
<div class="content1-text" >
        Text box
   <div id="back1" style="float:right;">HOME</div>
</div>

Css code:

.content1-text {
   padding: 20px;
   width: 920px;
   min-height: 560px;
   height: auto;
   background: #61752d;
   margin: 0;
   position: absolute;
   display: none;
}

jQuery code:

$('.content1').click(function () {
    if($('.content1').is(':visible')){
            $('.content1-text').toggle('slide', {
                direction: 'left'
            }, 1000);
    }
    else{
        $('#back1').toggle('slide', {
            direction: 'left'
        }, 1000, function(){ $('#content1-text').fadeIn();});
    }
});

The problem now is, that when a user clicks on open text box it opens the box, but when the user clicks on HOME it doesn't slide back as it was in the beginning...

Im trying to get it slide from left to right.. and when it closes from right to left.

I tried to find it on the web but with out any luck.

My JsFiddle here

Upvotes: 0

Views: 336

Answers (3)

DaniP
DaniP

Reputation: 38252

I think you really need to review the toogle method http://api.jquery.com/toggle/

You can do sometihng like this:

$('.content1').click(function () {
    $('.content1-text').toggle("slow");
});
$('#back1').click(function () {
    $('.content1-text').toggle("slow");
});

View the demo http://jsfiddle.net/PBm88/11/

EDIT

After more details of the expected result you can do a function based on the classname that enables the slide animation for the relative container:

$('.vertical').click(function () {
  var id=$(this).parent().attr('class'),
      slid='.'+id+'-text';
  $(slid).show().animate({
      width:'920px',
      opacity: '1'
  },2000)
});
$('.back').click(function () {
    $(this).parent().animate({
      width:'0px',
      opacity: '0'
    }, 
    {duration:2000,
     complete: function() {
         $( this ).hide();
        }
     });
});

New Demo http://jsfiddle.net/PBm88/59/

Upvotes: 2

Michael
Michael

Reputation: 7092

http://jsfiddle.net/PBm88/13/

Use this jQuery instead: 

$(document).ready(function() {
        $('#button, #back1').click(function() {
            $('#box').toggleClass('visible');
        });
    });

The CSS:

.visible { display: block; }

Also modified the HTML with three ID's.

Do any animation in CSS. Modify as you see fit.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You don't have a click handler for the home button

Try

$('.content1').click(function () {
        $('.content1-text').toggle('slide', {
            direction: 'left'
        }, 1000);
});

$('#back1').click(function(){
        $('.content1-text').toggle('slide', {
            direction: 'left'
        }, 1000);
})

Demo: Fiddle

Upvotes: 0

Related Questions