Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.07.2012, 11:52
Аспирант
Отправить личное сообщение для goooooch Посмотреть профиль Найти все сообщения от goooooch
 
Регистрация: 24.10.2010
Сообщений: 46

Как сделать смену текста по клику на ссылку?
Есть простенькая jquery-функция и код:
<script type="text/javascript">
function hideShow(el){
$(el).toggleClass('show').prev('div.hideCont').slideToggle('normal');
return false;
};
</script>
<h3>Заголовок</h3>
<p>Кратккое описание.</p>
<div class="hideWrap">
<div class="hideCont">Полное описание</div>
<a class="hideBtn" onclick="hideShow(this);return false;" href="javascript://">Читать дальше</a>
</div>


Работает, как надо, НО нужно, чтобы по клику на ссылку "Читать дальше" текст менялся на "Свернуть". Причем таких блоков будет несколько на одной странице. Поможет кто-нибудь?
Ответить с цитированием
  #2 (permalink)  
Старый 09.07.2012, 12:42
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<style>
 div.hideCont,
 a.hideBtn.hide{
 display:none;
}
</style>

<script type="text/javascript">
$(document).ready(function(){
$("a.hideBtn,a.hideBtn.hide").click(function(){
  var Prnt=$(this).parents('.hideWrap:first');
  Prnt.find('a.hideBtn,div.hideCont').toggle('fast')
return false;
 });
});
</script>

<h3>Заголовок</h3>
<p>Краткое описание.</p>
<div class="hideWrap">
<a class="hideBtn hide" href="#">Cвернуть</a>
<a class="hideBtn" href="#">Читать дальше</a>
<div class="hideCont">Полное описание</div>
<a class="hideBtn hide" href="#">Cвернуть</a>
<br /><br />

</div>

Последний раз редактировалось Deff, 09.07.2012 в 12:45.
Ответить с цитированием
  #3 (permalink)  
Старый 09.07.2012, 15:33
Аспирант
Отправить личное сообщение для goooooch Посмотреть профиль Найти все сообщения от goooooch
 
Регистрация: 24.10.2010
Сообщений: 46

Немного другой эффект возможен?
А как сделать так, чтобы сворачивание-разворачивание было с эффектом аккордеона (скрытый контент плавно раздвигался вниз)?
Ответить с цитированием
  #4 (permalink)  
Старый 09.07.2012, 15:39
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<style>
 div.hideCont,
 a.hideBtn.hide{
 display:none;
}
</style>

<script type="text/javascript">
$(document).ready(function(){
$("a.hideBtn,a.hideBtn.hide").click(function(){
  var Prnt=$(this).parents('.hideWrap:first');
  Prnt.find('a.hideBtn').toggle();
  Prnt.find('div.hideCont').slideToggle('normal');
return false;
 });
});
</script>

<h3>Заголовок</h3>
<p>Краткое описание.</p>
<div class="hideWrap">
<a class="hideBtn hide" href="#">Cвернуть</a>
<a class="hideBtn" href="#">Читать дальше</a>
<div class="hideCont">Полное описание<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
</div>
<a class="hideBtn hide" href="#">Cвернуть</a>
<br /><br />

</div>


Любое из "свернуть" - можно убрать

Последний раз редактировалось Deff, 09.07.2012 в 15:42.
Ответить с цитированием
  #5 (permalink)  
Старый 09.07.2012, 17:04
Аспирант
Отправить личное сообщение для goooooch Посмотреть профиль Найти все сообщения от goooooch
 
Регистрация: 24.10.2010
Сообщений: 46

отлично. спасибо. то, что надо.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать смену изображения видео. serggr Общие вопросы Javascript 0 17.04.2012 07:50
Как запретить отмену выделения текста от клика мышью? Маэстро Internet Explorer 0 03.04.2012 21:21
Как сделать загрузку изображения аля вконтакте? OklickSpb Общие вопросы Javascript 4 31.03.2012 17:12
Как сделать некликабельную ссылку? alexandr_v-vich Events/DOM/Window 16 07.03.2012 17:57
Как отлаживать события? Или как сделать трассировку вызовов функций? gennad Events/DOM/Window 1 18.08.2010 13:21