Г-код, но работает.
<!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="ru" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Косметология Perfection</title>
<link href="css/Perfection.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="http://yandex.st/jquery/1.5.1/jquery.min.js"></script>
<script src="js/equalHeight.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a.opislink:not(.active)').live('click',function(){
var Sel = '#'+$(this).attr('href');
$('.opislink.active').removeClass('active');
$(this).addClass('active');
$("div.opis").slideUp(760);
$(Sel).slideDown(760);
return false;
});
$('a.opislink.active').live('click',function(){
$(this).removeClass('active');
var Sel = '#'+$(this).attr('href');
$(Sel).slideUp(760);
return false;
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="tel"><img src="images/tel.png" width="280" height="50"></div>
<div id="sidebarL">
<a class="opislink" href="opis1" ><img src="images/111.png" width="150" >Фотоэпиляция</a>
<a class="opislink" href="opis2" ><img src="images/1111.jpg" width="150" >Фотоомоложение</a>
<a class="opislink" href="opis3" ><img src="images/1.jpg" width="150" >Уход за лицом и телом</a>
</div>
<div id="sidebarR">
<a href="javascript:void(0)"> Оборудование</a>
<a href="javascript:void(0)">Наши скидкии</a>
<a href="javascript:void(0)"> чётотам</a>
</div>
<div id="content" >
<div class="opis" id="opis1" >
<strong>Фотоэпиляция</strong> это самый современный способ безболезненного удаления нежелательных волос на любом участке тела на длительный срок. Удаление волос осуществляется посредством коагуляции (разрушения) волосяных фолликул с помощью мощных импульсов света, которые воздействуют на стержни и корни волос. Красящий пигмент волос ( меланин) поглощает энергию световых волн. В результате световая энергия переходит в тепловую, корни волос нагреваются и погибают. Следует отметить, что темные волосы содержат больше меланина, чем светлые или седые. Поэтому фотоэпиляция наиболее эффективна при темных волосах, менее эффективна при светлых . После первого сеанса удаляеться около 40% волос -это те волосы, которые находились в активной фазе роста. Через каждые 3-4 недели процедуру нужно повторить.
В среднем нужно пройти 5-8 процедур. После курса процедур волосы не растут 5-8лет.
<h4>Преимущества фотоэпиляции</h4>
<ul>
<li>Нет раздражения</li>
<li>Высокая эффективность</li>
<li>Быстрота воздействия</li>
<li>Не травматичность </li>
<li>Безболезненность </li>
<li>Не возможность инфицирования </li>
</ul>
</div>
<div class="opis" id="opis2" >
<strong>Фотоомоложение</strong>это самая современная и безболезненная методика устранения возрастных изменений кожи лица. Основой метода является действие импульса высокоинтенсивного света. Световые волны разной длины воздействуют на разные слои и типы кожи. В зависимости от длины световой волны и продолжительности воздействия на кожу различают три типа светового импульса:
<ol>
<li>тип позволяет устранить сосудистые звездочки, гиперпигментацию и покраснения;</li>
<li>тип способствует обесцвечиванию не глубоко залегших пигментных пятен, уменьшению морщин и сужению расширенных пор;</li>
<li>тип воздействует на глубокие слои кожи, стимулируя выработку коллагена и эластиновых волокон создавая подтягивающий эффект.
Не требует реабилитационного периода.</li>
</ol>
</div>
</div><!--End #content -->
<div id="footer"><p>Наш адрес: ул.Северная 400 <p> (Угол ул. Северной и ул. Янковского) </p> 4 этаж кабинет 401</p>
<p><a href=" http://maps.yandex.ru/?text=%D0%A0%D0%BE%D1%81%D1%81%D0%B8%D1%8F%2C%20%D0%9A%D1%80%D0%B0%D1%81%D0%BD%D0%BE%D0%B4%D0%B0%D1%80%D1%81
%D0%BA%D0%B8%D0%B9%20%D0%BA%D1%80%D0%B0%D0%B9%2C%20%D0%9A%D0%A0%D0%90%D0%A1%D0%9D%D0%9E%D0%94%D0%90%D0%A0%2C%20%D0%9A%D0%B0%D1%80%D0%B0%D1%81%D
1%83%D0%BD%D1%81%D0%BA%D0%B8%D0%B9%20%D1%80%D0%B0%D0%B9%D0%BE%D0%BD%2C%20%D1%83%D0%BB%D0%B8%D1%86%D0%B0%20%D0%A1%D0%B5%D0%B2%D0%B5%D1%80%D0%BD%
D0%B0%D1%8F%2C%20400&sll=38.984521%2C45.038521&ll=38.985884%2C45.038596&spn=0.023603%2C0.003712&z=16&l=map%2Cstv&ol=stv&oll=38.984369%2C45.0388
53&ost=dir%3A-192.3611129559762%2C2.658791839084038~spn%3A90%2C64.01076641616699" target="_blank"> Посмотреть на карте </a></p>
<p>Наши телефоны: +7-918-999-44-94; +7-909-44-88-446</p>
</div>
</div>
</body>
<style>
/* Стиль раскрывающихся блоков */
div.opis{
display:none;
position:relative;
background-color:#FFFFFF;
z-index:100;
width:340px;
padding:12px;
margin-top:12px;
border-radius:15px;
-webkit-border-radius:15px;
-khtml-border-radius:15px;
-moz-border-radius:15px;
-o-border-radius:15px;
-ms-border-radius:15px;
box-shadow: 0px 5px 18px #000;
-webkit-box-shadow:0px 5px 18px #000;
-khtml-box-shadow:0px 5px 18px #000;
-moz-box-shadow:0px 5px 18px #000;
-ms-box-shadow:0px 5px 18px #000;
}
a.opislink {
margin-top:12px;
display:block;
}
/* Cтарый стиль*/
body{
font:17px tahoma;
color:#000;
background:url(../images/3.jpg) no-repeat fixed;
-moz-background-size: 100%; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100%;
}
.opis{display:none; text-align: justify;}
#wrapper{
width:850px;
/*outline:1px solid #cccccc;*/
padding:10px;
margin:0 auto;
height:auto;
}
#header{
position:relative;
height:120px;
width:900px;
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:center;
background-image:Url(../images/Head1.png) ;
}
#content{
/*background-color:#FFFFFF;*/
margin:0 160px 12px 160px;
width:580px;
height:460px;
}
#tel{
position:fixed;
width:280px;
height:50px;
top:0;
right:0;
}
#head{
position:absolute;
left:0;
top:-14px;
z-index:3;
}
#sidebarL{
text-align: center;
/*background-color:#ebebeb;*/
margin-bottom:12px;
width:150px;
float:left;
}
#sidebarR{
text-align: center;
margin-bottom:12px;
width:150px;
float:right;
}
#footer{
display:inline-block;
text-align: center;
height:auto;
font-size:15px;
font-weight:700;
/*background-color:#111111;*/
margin-bottom:12px;
}
</style>
</body>
</html>
Ссылку на ID открываемого блока всовываем в HREF ссылки
<a class="opislink" href="
opis1" ><img src="images/111.png" width="150" >Фотоэпиляция</a>
