jQuery Show/hide drop box

garabildi · 02-15-2011, 04:13 PM

Hi!

I'm a complete noob when it comes to jquery so please excuse me if I'm asking an obvious question.

I'm working on an "image page" and I've created a 3x3 album matrix. Each of these 9 images has a a drop box feature at the bottom of the picture that displays text and a media player when clicked. It looks fine and it works well across the major browsers. However there are a couple of niggling problems that I would really like to resolve.

1) The big one! I would really love to have an automated process whereby opening one of the show/ hide boxes will cause another one to close. Right now you have to click to open and click to close. The problem is that I don't think people will be willing to do the later. This means that the page can get distorted if, for example, they opened images on different lines of the 3x3 matrix.

2) Is it possible to get the pointer to display this when you hover in the show/ hide area? Right now it is defaulted to this.

3) This is a long shot. But I've notice that the scroll wheel stops working in FF 3.6 after a number of show/ hide boxes have been opened. Is there any way to fix this?

I've provided the full css and html code for the 9 boxes (3x3) below. I hope this hasn't confused matters because the css began to get quite convoluted. I also hope that the layout of the html isn't so messy (I'll have to clean it up later) that it distracts.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$("#flipA").click(function(){
    $("#panelA").slideToggle("slow");
  });
$("#flipB").click(function(){
    $("#panelB").slideToggle("slow");
  });
$("#flipC").click(function(){
    $("#panelC").slideToggle("slow");
  });
$("#flipD").click(function(){
    $("#panelD").slideToggle("slow");
  });
$("#flipE").click(function(){
    $("#panelE").slideToggle("slow");
  });
$("#flipF").click(function(){
    $("#panelF").slideToggle("slow");
  });
$("#flipG").click(function(){
    $("#panelG").slideToggle("slow");
  });
$("#flipH").click(function(){
    $("#panelH").slideToggle("slow");
  });
$("#flipI").click(function(){
    $("#panelI").slideToggle("slow");
  });
});
</script>
<style type="text/css">
body {
font-size: 62.5%;
font-family:Arial, "Helvetica Condensed", Helvetica;
background:#000}

#wrapper{
width:800px;
margin:0 auto;}

#banner{
width:630px;
float:left;}

#banner h1 a{
width:240px;
height:135px;
display:block;
background:url(../images/banner_2.png) left top no-repeat;
text-indent:-5000px;
text-decoration:none;
outline:none;
margin:0;
padding:0;}

#banner h2{
font-size:1.1em;
color:#999;
margin:0;}

#nav{
float:left;
margin-left:630px;
margin-top:-28px;
width:170px;}
	
#nav ul{
list-style-type:none;
margin:0;
padding:0;}
	
#nav li{
float:left;
list-style-type:none;
font-size:1.1em;
text-transform:uppercase;}

#nav .colA{padding:0 5px 0 5px;}
#nav .colB{padding:0 8px 0 5px;}*/

a:link{ 
text-decoration: none;
color:#f3eedb;}

a:visited{  
text-decoration: none;
color:#f3eedb;}

a:hover, a:active{ 
text-decoration: underline; 
color:#95c3d1;}

#contentDiv{
width:800px;
clear:both;
padding-top:30px;
background:url(../images/line.png) left top no-repeat;
color:#f3eedb; 
text-align:justify; 
font-size:1.1em;}

#contentDiv h1{
color:#f3eedb;
padding-left:1px;}

#contentDiv h2{
font-size:1.5em;}

#home #leftContent{
float:left;
width:400px;
height:375px;}

#home #leftContent img{
padding-top:10px;}

#home #rightContentOne{ 
margin:0px 0 0 400px;
font-size:1em;
width:380px;}

#home #rightContentOne h2{
padding-top:10px;
color:#f3eedb;
margin:0;
border:0;}

#home #rightContentOne p, #home #rightContentTwo p{
text-align:justify;}

#home #rightContentTwo{
margin:0 0 0 400px;
font-size:1em;
width:380px;
padding-top:10px;}

#home #rightContentTwo h2{
padding-top:10px;
color:#f3eedb;
margin:0;
border:0;}

/* Music */

#music #colA{
width:475px;
float:left;
margin:10px 0 10px 0px;}

#music #col1, #music #col2, #music #col3{
	width:202px;}
	
#music #col1{
	float:left;}
	
#music #col2{
	float:right;}
	
#music #col3{
	float:right;
	margin:10px 50px 10px 0;}
	
#music #pic1, #music #pic2, #music #pic3, #music #pic4, #music #pic5, #music #pic6, #music #pic7, #music #pic8, #music #pic9{
	float:left;
	width:200px;
	border:outset 1px #95c3d1;
	margin-bottom:30px;}
	
#pic1 img, #pic2 img, #pic3 img, #pic4 img, #pic5 img, #pic6 img, #pic7 img, #pic8 img, #pic9 img{
border-bottom:outset 1px #95c3d1;}

#panelA, #panelB, #panelC, #panelD, #panelE, #panelF, #panelG, #panelH, #panelI{
	width:196px;
	height:240px;
	margin:0 2px 0 2px;
	text-align:justify;
	border-top:groove 1px #f3eedb;
	border-bottom:groove 1px #f3eedb;
	color:#f3eedb;
	display:none;}

#panelC a:visited{  
text-decoration: none;
color:#95c3d1;}

#panelC a:hover{ 
text-decoration: underline; 
color:#95c3d1;}

#panelA p, #panelB p, #panelC p, #panelD p, #panelE p, #panelF p, #panelG p, #panelH p, #panelI p{
padding:0 3px 0 3px;
font-weight:bold;}
	
#music object{
margin-left:12px;}	
	
#flipA, #flipB, #flipC, #flipD, #flipE, #flipF, #flipG, #flipH, #flipI{
color:#f3eedb;
width:190px;
margin:5px 0 5px 5px;
font-weight:bold;}
	

#flipA a:hover, #flipB a:hover, #flipC a:hover a:hover, #flipD a:hover, #flipE a:hover, #flipF a:hover, #flipG a:hover, #flipH a:hover, #flipI a:hover{
color:#95c3d1;}
</style>
</head>

<body id="music">
<div id="wrapper">
	<div id="banner">
	  <h1><a href="index.html" title="Home">Music</a></h1>
        <h2></h2>
	</div>


<div id="contentDiv">
<h2></h2>
		<div id="colA">
			<div id="col1">
				<div id="pic1">
				  <img src="images/one" />
				  <div id="panelA">
    <p>Blah Blah Blah</p>              
                                       <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"  codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="150" height="16">
                            <param name="src" value="music/one.mp3"/> 
                            <param name="controller" value="true" /> 
                            <param name="autoplay" value="false" />
                        
                        	<!--[if !IE]>-->
                        	<object type="video/quicktime" 
                            data="music/one.mp3"
                            width="150" height="16">
                            <param name="autoplay" value="false" />
                            <param name="controller" value="true" />
                            </object>
                       		<!--<![endif]-->
            </object>
				  </div>
							<p id="flipA">La Dispute &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp (<a>Click Here</a>)</p>
				</div>

		<div id="pic2"><img src="images/one" />
		  <div id="panelB">
		    <p>Blah Blah Blah</p> 
             <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"  codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="150" height="16">
                            <param name="src" value="music/one.mp3"/> 
                            <param name="controller" value="true" /> 
                            <param name="autoplay" value="false" />
                        
                        	<!--[if !IE]>-->
                        	<object type="video/quicktime" 
                            data="music/one.mp3"
                            width="150" height="16">
                            <param name="autoplay" value="false" />
                            <param name="controller" value="true" />
                            </object>
                       		<!--<![endif]-->
            </object>
	      </div>
					<p id="flipB">Translations &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp (<a>Click Here</a>)</p>
		</div>

		<div id="pic3"><img src="images/one" />
		  <div id="panelC">
		    <p>Blah Blah Blah</p> 
           <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"  codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="150" height="16">
                            <param name="src" value="music/one.mp3"/> 
                            <param name="controller" value="true" /> 
                            <param name="autoplay" value="false" />
                        
                        	<!--[if !IE]>-->
                        	<object type="video/quicktime" 
                            data="music/one.mp3"
                            width="150" height="16">
                            <param name="autoplay" value="false" />
                            <param name="controller" value="true" />
                            </object>
                       		<!--<![endif]-->
            </object>
           
  		  </div>
					<p id="flipC">DruidSynge &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp (<a>Click Here</a>)</p>
		</div>
	</div> <!-- col1 -->

	<div id="col2">
		<div id="pic4"><img src="images/one" />
		  <div id="panelD">
		    <p>Blah Blah Blah</p> 
                    
                              <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"  codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="150" height="16">
                            <param name="src" value="music/one.mp3"/> 
                            <param name="controller" value="true" /> 
                            <param name="autoplay" value="false" />
                        
                        	<!--[if !IE]>-->
                        	<object type="video/quicktime" 
                            data="music/one.mp3"
                            width="150" height="16">
                            <param name="autoplay" value="false" />
                            <param name="controller" value="true" />
                            </object>
                       		<!--<![endif]-->
            </object>
  		  </div>
					<p id="flipD">Henry &amp Sunny &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp (<a>Click Here</a>)</p>
		</div>

		<div id="pic5"><img src="images/one" />
		  <div id="panelE">
		    <p>Blah Blah Blah</p> 
		               <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"  codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="150" height="16">
                            <param name="src" value="music/one.mp3"/> 
                            <param name="controller" value="true" /> 
                            <param name="autoplay" value="false" />
                        
                        	<!--[if !IE]>-->
                        	<object type="video/quicktime" 
                            data="music/one.mp3"
                            width="150" height="16">
                            <param name="autoplay" value="false" />
                            <param name="controller" value="true" />
                            </object>
                       		<!--<![endif]-->
            </object>
	      </div>
				<p id="flipE">Empress of India &nbsp &nbsp &nbsp &nbsp (<a>Click Here</a>)</p>
		</div>

		<div id="pic6"><img src="images/one" />
		  <div id="panelF">
		    <p>Blah Blah Blah</p> 
                   <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"  codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="150" height="16">
                            <param name="src" value="music/one.mp3"/> 
                            <param name="controller" value="true" /> 
                            <param name="autoplay" value="false" />
                        
                        	<!--[if !IE]>-->
                        	<object type="video/quicktime" 
                            data="music/one.mp3"
                            width="150" height="16">
                            <param name="autoplay" value="false" />
                            <param name="controller" value="true" />
                            </object>
                       		<!--<![endif]-->
            </object>
  		  </div>
					<p id="flipF">The Yokohama Delegation &nbsp (<a>Click</a>) </p>
		</div>
	</div> <!--col2--> 
</div> <!--cola-->

	<div id="col3">
	  <div id="pic7"><img src="images/one" />
	    <div id="panelG">
	      <p>Blah Blah Blah</p> 
           <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"  codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="150" height="16">
                            <param name="src" value="music/one.mp3"/> 
                            <param name="controller" value="true" /> 
                            <param name="autoplay" value="false" />
                        
                        	<!--[if !IE]>-->
                        	<object type="video/quicktime" 
                            data="music/one.mp3"
                            width="150" height="16">
                            <param name="autoplay" value="false" />
                            <param name="controller" value="true" />
                            </object>
                       		<!--<![endif]-->
            </object>
        </div>
			  <p id="flipG">Leaves &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp (<a>Click Here</a>)</p>
	  </div>

	  <div id="pic8"><img src="images/one" />
	    <div id="panelH">
	      <p>Blah Blah Blah</p> 
           <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"  codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="150" height="16">
                            <param name="src" value="music/one.mp3"/> 
                            <param name="controller" value="true" /> 
                            <param name="autoplay" value="false" />
                        
                        	<!--[if !IE]>-->
                        	<object type="video/quicktime" 
                            data="music/one.mp3"
                            width="150" height="16">
                            <param name="autoplay" value="false" />
                            <param name="controller" value="true" />
                            </object>
                       		<!--<![endif]-->
            </object>
        </div> 
			  	<p id="flipH">The Year of the Hiker &nbsp &nbsp &nbsp &nbsp &nbsp (<a>Click</a>)</p>
	  </div>

	  <div id="pic9"><img src="images/one" />
	    <div id="panelI">
		  <p>Blah Blah Blah</p> 
           <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"  codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="150" height="16">
                            <param name="src" value="music/one.mp3"/> 
                            <param name="controller" value="true" /> 
                            <param name="autoplay" value="false" />
                        
                        	<!--[if !IE]>-->
                        	<object type="video/quicktime" 
                            data="music/one.mp3"
                            width="150" height="16">
                            <param name="autoplay" value="false" />
                            <param name="controller" value="true" />
                            </object>
                       		<!--<![endif]-->
            </object>

    	</div>
			  	<p id="flipI">The Waiting &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp (<a>Click Here</a>)</p>
	  </div>
	</div>
</div>
</div>
</body>
</html>

Spudhead · 02-15-2011, 05:07 PM

You are going to love CSS class selectors.

Anything that's a panel, give it a "panel" class. So:

<div id="panelB">

becomes

<div id="panelB" class="panel">

and

<div id="panelZ">

becomes

<div id="panelZ" class="panel">

You get the idea: do the same thing with your "flip" divs; give them a class of "flip".

Now replace your JS with:

Code:

$(document).ready(function(){

	$(".flip").click(function(){
		$('.panel').slideUp();
		$(this).prev('.panel').slideDown();
	});

});

That says: any time anything with a class of "flip" is clicked, slide all the "panel" elements up, and slide the panel element that's directly previous to it, down.

And, being CSS class selectors, you can use them in your CSS. So you don't have to do this:

Code:

#flipA, #flipB, #flipC, #flipD, #flipE, #flipF, #flipG, #flipH, #flipI{
color:#f3eedb;
width:190px;
margin:5px 0 5px 5px;
font-weight:bold;}

you can do this:

Code:

.flip{
	color:#f3eedb;
	width:190px;
	margin:5px 0 5px 5px;
	font-weight:bold;
}

and to get the cursor to be a hand, add:
cursor: pointer
to the above style.

No idea about the scroll wheel, though...

garabildi · 02-15-2011, 06:53 PM

Brilliant stuff, spudhead. That works perfectly. Thank you very much.

I knew that I was neglecting classes but I'm not familiar enough with jquery to know how to target them correctly.

I've been trying to figure out how to I could add a close function to an individual "flip" as well as a your solution. In other words, the user can close box A by opening box B and also by clicking on box A again.

Would I have to target the id as opposed to the class? so something like:

Code:

$(document).ready(function(){

$("#flipA").click(function(){
		$('#panelA').slideUp('slow')
		$(this).prev('#panelA').slideDown('slow');
$(".flip").click(function(){
		$('.panel').slideUp('slow');
		$(this).prev('.panel').slideDown('slow');
	});

	});

});

That code actually sends the boxes into amusing conniptions but perhaps I'm on the right track?

Spudhead · 02-16-2011, 09:36 AM

There's a couple of ways, one might be to use the data() function to store whether the panel is open or not, something like this:

Code:

$(".flip").click(function(){
	var $this_panel = $(this).prev('.panel');
	if ($this_panel.data('visible') === true ){
		$this_panel.slideUp().data('visible', false);
	}else{
		$('.panel').slideUp();
		$this_panel.slideDown().data('visible', true);
	});
});

garabildi · 02-16-2011, 02:02 PM

I'd never would have figured that out

Unfortunately, I'm getting a syntax error (see the bold closing brackets). I've played around with the code a bit but without success.

Code:

$(document).ready(function(){
        $(".flip").click(function(){
	var $this_panel = $(this).prev('.panel');
	if ($this_panel.data('visible') === true ){
		$this_panel.slideUp().data('visible', false);
	}else{
		$('.panel').slideUp();
		$this_panel.slideDown().data('visible', true);
	});
});

venegal · 02-16-2011, 06:24 PM

The else statement is missing its closing brace.

You absolutely have to use proper indentation, or your code will be practically unreadable and unmaintainable.

Properly formatted and with the added brace, that snippet would look like this:

PHP Code:


			
$(document).ready(function () {

    $(".flip").click(function () {

        var $this_panel = $(this).prev('.panel');

        if ($this_panel.data('visible') === true ) {

            $this_panel.slideUp().data('visible', false);

        }

        else {

            $('.panel').slideUp();

            $this_panel.slideDown().data('visible', true);

        }

    });

});

garabildi · 02-18-2011, 05:48 PM

Thanks to both of you for the help. It works great now.