jQuery html css slidetoggle effect

Question

I'm trying to make a movie booking system website which also has info on movies. I want to implement a mechanism where when a user clicks on the poster of a particular movie, its info(description and cast) shows up and slides down. I have achieved this. But the problem I'm having is, when a description of a particular movie slides downwards, every other movie poster in the same row slide down with it. What I want is for every other element to remain static.

Here is my HTML code:

    <div class="contents">
    <table id="movies">
        <tr>
            <td class="Horror"><img id="Image1" src="<?php echo "$image_1"; ?>" width=250 height=400> <p><?php echo "Name: $name_1";?></p>
                                                                                                <p class="description" id="desc1"><?php echo "<span>Description:</span> $description_1"?>
                                                                                                <p class="cast" id="cast1"> <?php echo "<span>Cast:</span> $cast_1" ?></p></td>
            <td class="Action"><img id="Image2" src="<?php echo "$image_2"; ?>" width=250 height=400> <p><?php echo "Name: $name_2";?></p>
                                                                                            <p class="description" id="desc2"><?php echo "<span>Description:</span> $description_2"?>
                                                                                            <p class="cast" id="cast2"> <?php echo "<span>Cast:</span> $cast_2" ?></p></td>
            <td class="Action"><img id="Image3" src="<?php echo "$image_3"; ?>" width=250 height=400> <p><?php echo "$name_3";?></p>
                                                                                            <p class="description" id="desc3"><?php echo "<span>Description:</span> $description_3"?>
                                                                                            <p class="cast" id="cast3"> <?php echo "<span>Cast:</span>$cast_3" ?></p></td>
        </tr>
        <tr>
            <td class="Action"><img id="Image4" src="<?php echo "$image_4"; ?>" width=250 height=400> <p><?php echo "Name: $name_4";?></p>
                                                                                            <p class="description" id="desc4"><?php echo "<span>Description:</span> $description_4"?>
                                                                                            <p class="cast" id="cast4"> <?php echo "<span>Cast:</span> $cast_4" ?></p></td>
            <td class="Horror"><img id="Image5" src="<?php echo "$image_5"; ?>" width=250 height=400> <p><?php echo "Name: $name_5";?></p>
                                                                                            <p class="description" id="desc5"><?php echo "<span>Description:</span> $description_5"?>
                                                                                            <p class="cast" id="cast5"> <?php echo "<span>Cast:</span> $cast_5" ?></p></td>
            <td class="Comedy"><img id="Image6" src="<?php echo "$image_6"; ?>" width=250 height=400> <p><?php echo "Name: $name_6";?></p>
                                                                                            <p class="description" id="desc6"><?php echo "<span>Description:</span> $description_6"?>
                                                                                            <p class="cast" id="cast6"> <?php echo "<span>Cast:</span> $cast_6" ?></p></td>
        </tr>
    </table>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/show.js"></script>

And this is my CSS:

    td .description{

display:none;
padding:40px;
/*background-image: url('Images/desc_back.jpg');*/
background-color: rgba(230, 230, 239, 0.3);
color:#222;
position:relative;
right:-120px;
top:-290px;
/*margin:0, auto;*/
border: 3px solid transparent;
border-radius: 10px;
overflow:hidden;
}

    td .cast {
display:none;
/*background-color: rgba(34, 34, 34, 0.4);
color:#f3f2f1;*/
background-color: rgba(230, 230, 239, 0.3);
color:#222;
position:relative;
right:-120px;
top:-290px;

border: 3px solid transparent;
border-radius: 10px;
}
    span{
font-size:16px;
font-weight: bold;
text-decoration: underline;
}

and my jQuery:

    $('document').ready(function(){
var count=1;

    $('#Image1').click(function(){
if(count === 1){
    $('#desc1').slideToggle('slow');
    $('#cast1').slideToggle('slow');
     count=0;
}
else{
    $('#cast1').slideToggle('fast');
    $('#desc1').slideToggle('fast');
     count=1;
}
});
    $('#Image2').click(function(){
if(count === 1){
    $('#desc2').slideToggle('slow');
    $('#cast2').slideToggle('slow');
     count=0;
}
else{
    $('#cast2').slideToggle('fast');
    $('#desc2').slideToggle('fast');
     count=1;
}
});
    $('#Image3').click(function(){
if(count === 1){
    $('#desc3').slideToggle('slow');
    $('#cast3').slideToggle('slow');
     count=0;
}
else{
    $('#cast3').slideToggle('fast');
    $('#desc3').slideToggle('fast');
     count=1;
}
 });
    $('#Image4').click(function(){
if(count === 1){
    $('#desc4').slideToggle('slow');
    $('#cast4').slideToggle('slow');
     count=0;
}
else{
    $('#cast4').slideToggle('fast');
    $('#desc4').slideToggle('fast');
     count=1;
}
});
    $('#Image5').click(function(){
if(count === 1){
    $('#desc5').slideToggle('slow');
    $('#cast5').slideToggle('slow');
     count=0;
}
else{
    $('#cast5').slideToggle('fast');
    $('#desc5').slideToggle('fast');
     count=1;
}
});
    $('#Image6').click(function(){
if(count === 1){
    $('#desc6').slideToggle('slow');
    $('#cast6').slideToggle('slow');
     count=0;
}
else{
    $('#cast6').slideToggle('fast');
    $('#desc6').slideToggle('fast');
     count=1;
}
});
});

What I want to achieve is only want my description and cast to slide and keep everything else fixed. Really appreciate any help I get.

What's with the count?

Abhilash
– Abhilash

2012-11-05 06:40:02 +00:00
Commented Nov 5, 2012 at 6:40 — Abhilash
– Abhilash, Commented Nov 5, 2012 at 6:40

elclanrs · Accepted Answer · 2012-11-05 06:54:43Z

3

I'd say forget about tables, ids, counters, if...else statements. This problem is easier than what you're thinking. The key is to use classes and this.

Check out the demo.

First create proper markup. You could change the paragraph with another div if necessary, the point is not use tables for this because they're probably not necessary and it complicates things for no reason.

<div class="movie">
  <img src="http://placekitten.com/270/390"/>
  <p>
    <strong>Title</strong>
    <span>Lorem ipsum dolor sit amet...</span>
  </p>
</div>

Then position everything with css. If you use border-box it will be easier to adjust because you don't have to worry about widths.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.movie { 
  width: 270px;
  height: 390px;
  position: relative;
  cursor: pointer;
}
.movie strong {
  display: block;
  font-size: 20px;
}
.movie p {
  position: absolute;
  bottom: 0;
  padding: 1em;
  margin: 0;
  width: 100%;
  background: rgba(255,255,0,.8);
  display: none;
}

And finally, all you need is one line of jQuery:

$('.movie').click(function() { $('p', this).slideToggle(); });

edited Nov 5, 2012 at 6:54

answered Nov 5, 2012 at 6:46

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nupac Over a year ago

Worked perfectly, Thank you so much

Eli · Accepted Answer · 2012-11-05 06:37:04Z

1

You can do like this:

$('[id^="Image"]').each(function() {
    $(this).click(function() {
        if(count === 1){
            $(this).siblings('.description').slideToggle('slow');
            $(this).siblings('.cast').slideToggle('slow');
            count=0;
        }
        else{
            $(this).siblings('.description').slideToggle('fast');
            $(this).siblings('.cast').slideToggle('fast');
            count=1;
        }
    });
})

answered Nov 5, 2012 at 6:37

Eli

14.9k5 gold badges61 silver badges77 bronze badges

Collectives™ on Stack Overflow

jQuery html css slidetoggle effect

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related