У меня куча блоков с классом в которых есть блок с классом text_element.
Я написал скрипт для скрытия блока text_element при нажатии на element
Я нажимаю на блок с классом element и скрываются все блоки text_element, а мне нужно что-бы скрылся только тот что находится в блоке по которому кликнули. Заранее спасибо!
Вот страница
<?php
$db = mysql_connect("localhost","mol","malik");
mysql_select_db("vzale.ru",$db);
//Перекодируем результат в требуемую форму
mysql_query("SET NAMES cp1251");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="ru">
<script src='scripts/jquery.js'></script>
<script src='scripts/jsA.js'></script>
<link rel='stylesheet' type='text/css' href='style.css'>
<title>Главная</title>
</head>
<body>
<div class='container'>
<?php
$result = mysql_query("SELECT * FROM lessons");
$myrow = mysql_fetch_array($result);
do{
printf("
<div id='element'>
<a href=''><div class='head_element'><h4>%s</h4></div></a>
<div class=' img_element'><img src='%s' width='270px' height='110px'></div>
<div class='text_element'>%s</div>
<div class='info_element'><p>Автор: %s Добавлено: %s</p></div>
<a href=''><div class='add_element'><p>Добавить</p></div></a>
</div>"
,$myrow["name"], $myrow["img"],$myrow["description"], $myrow["author"],$myrow["date"]);
}
while($myrow = mysql_fetch_array ($result));
?>
<div class='clear_float'></div>
</div>
</body>
</html>
А вот скрипт
$(document).ready(function(){
$('#element').toggle(function(){
$('.text_element').slideDown(250);
},
function(){
$('.text_element').slideUp(250);
}
);
});
И CSS, если нужно, только половина там лишняя
|
Код:
|
body{
margin:0;
}
.container{
box-shadow: 0 0 15px rgba(0,0,0,0.5);
padding:30px 10px;
width:576px;
margin:auto;
}
p {
margin:0;
padding:5px 9px;
}
a {
text-decoration:none;
}
.head_element{
background-color:#000;
opacity:0.5;
color:#8E8E8E;
border-top-left-radius:3px;
border-top-right-radius:3px;
}
.head_element h4{
opacity:1;
}
.img_element{
padding:5px;
opacity:0.8;
}
.img_element:hover{
}
.text_element{
padding:5px;
}
.text_element p{
padding:0;
font-family: "Verdana";
font-size:13px;
color:#4D4D4D;
}
.info_element{
font-size:14px;
color:#8E8E8E;
text-align:left;
}
.info_element a{
color:#8E8E8E;
text-decoration:underline;
}
.add_element{
color:#8E8E8E;
background-color:#000;
opacity:0.5;
text-align:center;
font-weight:900;
cursor:pointer;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
}
.add_element:hover{
color:#414141;
}
#element{
background-image:url(img/groovepaper.png);
width:280px;
font-family: "Calibri";
margin-bottom:20px;
border-top:1px solid #CDCDCD;
border-left:1px solid #AFAFAF;
border-bottom:1px solid #656565;
border-right:1px solid #AFAFAF;
border-radius:4px;
}
#element:nth-child(odd){
float:left;
}
#element:nth-child(even){
float:right;
}
#element:hover{
box-shadow: 0 0 15px rgba(0,0,0,0.5);
}
h1, h2, h3, h4, h5, h6{
padding:4px;
margin:0 auto;
}
.clear_float{
clear:both;
} |