I have this list
http://pastebin.me/dde64f8c185de9dd5e429f84701a01ce
Anytime you click on an image extra content appears . I have tryed several css methods but i cant get the images to remain in their position and get the text to go underneath . Anyone has a solution ?
views:
35answers:
2
A:
I think you're going about displaying the content the wrong way, check out this jsFiddle example I've been working with, just replace the button with your image, that should at least give you a push in the right direction.
Hope it helps.
Kyle Sevenoaks
2010-06-14 09:51:23
same problem if i add more than one button
andrei
2010-06-14 10:03:44
+1
A:
Ok, Solved Here is your html
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test Page</title>
<style type="text/css">
* { margin: 0; padding: 0;}
.holder { width:105px;float:left; }
img { width: 105px;
float:left;
}
.content {
display:none;
float:left;
}
#container { width:350px;margin:auto; }
</style>
<script type="text/javascript" src="http://www.feetjeans.com/new_fj/nou/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('img').click(function(){
var clasa = $(this).attr("class");
var divul = '#' + clasa;
var cssul = $(divul).css('display');
if(cssul == 'none') { $(divul).fadeIn(500); }
else $(divul).hide(500);
console.log('test');
});
});
</script>
</head>
<body>
<div id="container">
<div class="holder">
<img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="0" align="left" />
<span class="content" id="0">This is content</span>
</div>
<div class="holder">
<img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="1" />
<span class="content" id="1">This is content</span>
</div>
</div>
</body>
</html>
UPDATE
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test Page</title>
<style type="text/css">
* { margin: 0; padding: 0;}
.holder { width:350px;float:left; }
img { width: 105px;
float:left;
}
.content {
display:none;
border: 1px #09f solid;
}
#container { width:350px;margin:auto; }
</style>
<script type="text/javascript" src="http://www.feetjeans.com/new_fj/nou/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('img').click(function(){
$(".content").hide("fast");
var clasa = $(this).attr("class");
var divul = '#' + clasa;
var cssul = $(divul).css('display');
if(cssul == 'none') { $(divul).fadeIn(500); }
else $(divul).hide(500);
console.log('test');
});
});
</script>
</head>
<body>
<div id="container">
<div class="holder">
<img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="0" />
<img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="1" />
<img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="2" />
<div style="clear:both;"></div>
<div class="content" id="0">This is content</div>
<div class="content" id="1">This is content</div>
<div class="content" id="2">This is content</div>
</div>
<div class="holder">
<img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="3" />
<img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="4" />
<img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="5" />
<div style="clear:both;"></div>
<div class="content" id="3">This is content</div>
<div class="content" id="4">This is content</div>
<div class="content" id="5">This is content</div>
</div>
</div>
</body>
</html>
Starx
2010-06-14 10:02:01
not quite.. i want something like this http://pastebin.me/f88c85d5b565d4354f63b10345c6fd35 but without the table / tr / td format
andrei
2010-06-14 10:26:27