Javascript-форум - Помогите со скриптом разворачивания текста

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Помогите со скриптом разворачивания текста (https://javascript.ru/forum/dom-window/30949-pomogite-so-skriptom-razvorachivaniya-teksta.html)

Помогите со скриптом разворачивания текста

<script type="text/javascript">
$(document).ready(function() {$('#opislink1').click(function() {
if ( jQuery.browser.msie && parseInt(jQuery.browser.version) == 6) {
if ($('#opis1').css("display")=="block") {$('#opis1').css("display", "none");
} else {$('#opis1').css("display", "block");
}
} else {$('#opis1').toggle("normal");
}
if ($('#button3').text()=='Развернуть') {$('#button3').text('Свернуть');
} else {$('#button3').text('Развернуть');
}
});
});
</script>

<a href="javascript:void(0)" id="opislink1"><class id="button3">Развернуть</div></a>
<div class="opis" id="opis1">Текст</div>

этот скрипт работает только с одной кнопкой разворачивания текста, а у меня на сайте их несколько. Как сделать, чтобы скрипт работал со всеми кнопками?

Назначайте события по классу элемента, а не по id. Только тогда надо смотреть или отношения потомок/родитель или отслеживать предыдущий/следующий.

<script type="text/javascript" src="http://yandex.st/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
div.opis{
   display:none;
   height:100px;
   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;
}
</style>




<div class="Wrap">
  <a href="#" class="opislink" >Развернуть</a> 
  <div class="opis">Текст</div>
</div>

<div class="Wrap">
  <a href="#" class="opislink" >Развернуть</a> 
  <div class="opis">Текст</div>
</div>

<div class="Wrap">
  <a href="#" class="opislink" >Развернуть</a> 
  <div class="opis">Текст</div>
</div>






<script type="text/javascript">
$(document).ready(function(){

  $('a.opislink:not(.active)').live('click',function(){
    $(this).addClass('active');
    $(this).html('Свернуть')
    $(this).parent().find('div.opis').slideDown(760)
    return false;
  });

  $('a.opislink.active').live('click',function(){
    $(this).removeClass('active');
    $(this).html('Развернуть')
    $(this).parent().find('div.opis').slideUp(760)
    return false;
  });

});
</script>

Deff,
Очень красиво.) а можно сделать чтобы заголовки оставались прежнеми?!

спасибо огромное

Deff,
я тебя оч. уважаю за то что ты делаешь для новичков, но не лучше ли дать удочку, а не рыбу?))

Serg_pnz,
Ну мож я чуть эгоист - шеф просил нарастить скорость

у меня такаяже проблема... накидал скриптов текст почти также красиво раскрывается(без рамки) но мне нужно чтоб при нажатии на следующую ссылку предыдущий текст закрывался

Deff,
поможите

<script type="text/javascript" src="http://yandex.st/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
div.opis{
   display:none;
   height:100px;
   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;
}
</style>




<div class="Wrap">
  <a href="#" class="opislink" >Развернуть</a> 
  <div class="opis">Текст</div>
</div>

<div class="Wrap">
  <a href="#" class="opislink" >Развернуть</a> 
  <div class="opis">Текст</div>
</div>

<div class="Wrap">
  <a href="#" class="opislink" >Развернуть</a> 
  <div class="opis">Текст</div>
</div>






<script type="text/javascript">
$(document).ready(function(){

  $('a.opislink:not(.active)').live('click',function(){
    $('a.opislink.active').click();
    $(this).addClass('active');
    $(this).html('Свернуть')
    $(this).parent().find('div.opis').slideDown(760)
    return false;
  });

  $('a.opislink.active').live('click',function(){
    $(this).removeClass('active');
    $(this).html('Развернуть')
    $(this).parent().find('div.opis').slideUp(760)
    return false;
  });

});
</script>

уточняю: ато текст добавляется и заползает на другой блок

:) постом ранее

Алилуя я неделю мучался уроки учил а времени нет..огромное.. нет ОГРОМНОЕ СПАСИБО!!!!!

Цитата:

Сообщение от Deff (Сообщение 226501)

:) постом ранее

надеюсь не надоел.?имеются 3 вертикальных блока sidebarL;...R и content немогу замутить чтоб ссылки были в R и L а текст открывался в content. а ещё...Можно чтоб картинка была ссылкой в скрипт вставляю не фунциклирует:(

Deff,
х.з. как привлечь внимание я тут новичёк и сайтостроение только неделю изучаю(эт чтоб не ругали сильно)

Цитата:

Сообщение от Александр БЛА БЛА

Можно чтоб картинка была ссылкой в скрипт вставляю не фунциклирует

Без перехода

<a href="http://javascript.ru/forum/"><img src="http://javascript.ru/forum/images/smilies/sad.gif" border="0" alt="" title="Sad" class="inlineimg"/></a>

С переходом

<a href="http://qps.ru/VWohs" target=_blank"><img src="http://javascript.ru/forum/images/smilies/sad.gif" border="0" alt="" title="Sad" class="inlineimg"/></a>

Цитата:

Сообщение от Александр БЛА БЛА

надеюсь не надоел.?имеются 3 вертикальных блока sidebarL;...R и content немогу замутить чтоб ссылки были в R и L а текст открывался в content.

Ccылку на тест страницу или минимальный HTML код в топик, сформатируйте его тегами => http://javascript.ru/formatting

Александр БЛА БЛА,
:) А чо делать то нужно, поясните еще раз поподробней ?

1-е html 2-е css но это старый вариант где текст следующей ссылки добавляется к предыдущему. а ваш метод и так и так пытался... либо текст под картинками открывался либо сыпалась вся страница ну и много других нерабочих вариантов......:-E

нужно чтоб ссылки в sidebarL. а текст выплывал в content красиво как во вчерашней помоще

Завтра гляну вечером,

Да этот скрипт:
<script src="js/equalHeight.js"></script> имеет отношение ?
Если да - нужен код

$(document).ready(function() {
 function setEqualHeight(columns)
 {
 var tallestcolumn = 0;
 columns.each(
 function()
 {
 currentHeight = $(this).height();
 if(currentHeight > tallestcolumn)
 {
 tallestcolumn  = currentHeight;
 }
 }
 );
 columns.height(tallestcolumn);
 }
 setEqualHeight($("#sidebarL,#sidebarR,#content"));
});

этот в принципе ненадо... это блоки выравнивать, стоит чтоба footer не поднимался... В принципе вопрос о самозакрывании открытого раннее текста и встал изза того что content не раздвигается и текст заползает на блок footer..... heigth:auto здесь не рулит. :blink:

Г-код, но работает.

<!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>

Deff,
Ай молодца!!!напиши номер я те хоть пару соток на тел завтра кину

отредактировал выше уменьшил до 2 ссылок как мне развертывание приделать к ссылке(кнопке) "ПОДРОБНЕЕ"

я так понимаю что либо от кнопок либо от скрытого текста прийдётся отказаться?

Александр БЛА БЛА,
Добавьте run и hide

[HTML run hide height=700]

//Тут Код

[/html]

Deff,
[html run hide height=700 xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr"] сюда? а сама ссылка как будет?
<a class="comments-link" class="opislink" href="opis1">Уход за лицом и телом</a> ????

Александр БЛА БЛА,
Нет, первый BB тег в Коде поста 28

Deff,
не я не вкуриваю. Это типа в 28ю строку? в код html..? или css? и какой синтаксис ссылки???

Александр БЛА БЛА,
Страница длинная и не читабельная и код не запускаемый
Найдите при редактировании в сообщении #28 [HTML]
И замените

Deff,
28 это css

незаметил что нечитается.переделал. выложить?

И 23
//Лан - ушел, напомни завтра к вечеру

Deff,
спасибо за помощь... методом научного тыка нашёл место для
[HTML run hide height=700] в смысле я ссылку неправильно прописывал и неполучалось

Александр БЛА БЛА,
Объясните еще раз суть правки - я уже забыл

Deff,
доброго времени суток. появился ещё вопрос. рыл рыл наверно не там (и якоря лепил, и сам текст в ссылку вкладывал(по 2 раза открывается)). подскажите пожалуста как к 25му посту приделать на body, "click" со сворачиванием текста и возвратом в начало страницы. контент большой, ссылки fixed и приходится крутить колесо на мыше до верха. не юзабилити... надеюсь в ближайшем будущем выложу - дам ссылку. зацЕните свою помощь.