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.

Answer 1

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(); });