Javascript-форум - Раздвигающийся текст. Нужна помощь!

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

- jQuery (https://javascript.ru/forum/jquery/)

- - Раздвигающийся текст. Нужна помощь! (https://javascript.ru/forum/jquery/29737-razdvigayushhijjsya-tekst-nuzhna-pomoshh.html)

cheba

09.07.2012 16:25

Раздвигающийся текст. Нужна помощь!

Надо чтобы раскрывающийся текст мог раскрываться с нескольких ссылок к примеру из стандартного меню и с обычной ссылки.
Лучше чтобы в меню вызов открытия текста находился в параметре href.
+
Когда открывается одна форма, вторая сворачивается.

Прошу помогите!!

Нигде не смог найти такого решения.
:cray:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
 
</head>
 
<body>
 
Меню:
<ul>
<li><a href="#" class="heading">Button</a></li>
<li><a href="#" class="heading1">Button2</a></li>
</ul>
 
Текст:
 
  <a href="#" class="heading">Button</a>
<div class="content">Lorem ipsum dolor sit amet</div>
 
  <a href="#" class="heading1">Button2</a>
<div class="content1">Lorem ipsum dolor sit amet2</div>
<script>
 
$(document).ready(function() {
  $(".content").hide();
  $(".content1").hide();
 
  //toggle the componenet with class msg_body
  $(".heading").click(function()
  {
    $(this).next(".content").slideToggle(500);
    
  });
  $(".heading1").click(function()
  {
    $(this).next(".content1").slideToggle(500);
    
  });
 
});</script>
</body>
</html>

Deff	09.07.2012 18:21

cheba,
http://javascript.ru/forum/misc/2972...tml#post187461

cheba

10.07.2012 08:54

Спасибо, но немного не то что нужно было.

Ищу решения.

Я в этом профан. =(

jeysmook

10.07.2012 09:21

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function() {
  $(".content").hide();
  $(".content1").hide(); 
  //toggle the componenet with class msg_body
  $(".heading").click(function(){
	var content = $('.content1');
    $('.content').slideToggle(500); 
	if(content.css('display')=='block'){
		content.slideUp(500);
	}
  });
  $(".heading1").click(function(){
	var content = $('.content');
    $('.content1').slideToggle(500);
	if(content.css('display')=='block'){
		content.slideUp(500);
	}  
  }); 
});
</script>
</head>
 
<body>
 
Меню:
<ul>
	<li><a href="#" class="heading">Button</a></li>
	<li><a href="#" class="heading1">Button2</a></li>
</ul>
 
Текст:
<a href="#" class="heading">Button</a>
<a href="#" class="heading1">Button2</a>
<div class="content">Lorem ipsum dolor sit amet</div>
<div class="content1">Lorem ipsum dolor sit amet2</div>
</body>
</html>

cheba

10.07.2012 10:02

Круто! Спасибо! ТОлько вот когда подставляю к ссылкам тег <p> он автоматом присваивает стиль display:none;

Еще минус. При нажатии ссылки все время отправляет вверх страницы.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function() {
  $(".one").hide();
  $(".too").hide(); 
  //toggle the componenet with class msg_body
  $(".textone").click(function(){
	var content = $('.too');
    $('.one').slideToggle(500); 
	if(content.css('display')=='block'){
		content.slideUp(500);
	}
  });
  $(".texttoo").click(function(){
	var content = $('.one');
    $('.too').slideToggle(500);
	if(content.css('display')=='block'){
		content.slideUp(500);
	}  
  }); 
});
</script>
</head>
 
<body>
 
Меню:
<ul>
	<li><a href="#" class="textone">Button</a></li>
	<li><a href="#" class="texttoo">Button2</a></li>
</ul>
 
Текст:
<a href="#" class="textone">Button</a>
<a href="#" class="texttoo">Button2</a>
<div class="one">Lorem ipsum dolor sit amet</div>
<div class="too">Lorem ipsum dolor sit amet2</div>
</body>
</html>

jeysmook

10.07.2012 10:44

Вроде норм...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script> 
$(document).ready(function() {
  $(".content, .content1").css('display','none');
  //toggle the componenet with class msg_body
  $(".heading").click(function(){
	var content = $('.content1');
    $('.content').slideToggle(500); 
	if(content.css('display')=='block'){
		content.slideUp(500);
	}
	return false;
  });
  $(".heading1").click(function(){
	var content = $('.content');
    $('.content1').slideToggle(500);
	if(content.css('display')=='block'){
		content.slideUp(500);
	} 
	return false;
  }); 
});
</script>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
 
<body>
<p>Меню 1</p>
<ul class="menu">
	<li><a href="#" class="heading">Button</a></li>
	<li><a href="#" class="heading1">Button2</a></li>
</ul>
<p>Меню 2</p>
<ul class="menu">
	<li><p><a href="#" class="heading">Button</a></p></li>
	<li><p><a href="#" class="heading1">Button2</a></p></li>
</ul>
<div class="content">Lorem ipsum dolor sit amet</div>
<div class="content1">Lorem ipsum dolor sit amet2</div>
</body>
</html>

cheba

10.07.2012 19:41

Спасибо! Все заработало!

Есть просьба последняя. А можно добавить открытому элементу (активированному) id="active" (или что-то на подобии) только чтобы он появлялся не в ссылке меню а в ссылке рядом с текстом. (чтобы я смог на ссылку повесить стили когда активен текст)

jeysmook

11.07.2012 10:07

Описуйте проблему сразу и полностью :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script> 
$(document).ready(function() {
  $(".content, .content1").css('display','none');
  //toggle the componenet with class msg_body
  $(".heading").click(function(){
	var content = $('.content1');
    $('.content').slideToggle(500);
	$('.menu2 li a').removeAttr('id');
	$('.menu2 li a.heading').attr('id','active'); 
	if(content.css('display')=='block'){
		content.slideUp(500);
	}	
	return false;
  });
  $(".heading1").click(function(){
	var content = $('.content');
    $('.content1').slideToggle(500);
	$('.menu2 li a').removeAttr('id');
	$('.menu2 li a.heading1').attr('id','active');
	if(content.css('display')=='block'){
		content.slideUp(500);		
	} 
	return false;
  }); 
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#active{
	background:#eee;
	color:#333;
	text-decoration:none;
	border:1px solid #c0c0c0;
	border-radius:5px;
	padding:5px 10px 5px 10px;
}
</style>
</head>
 
<body>
<p>Меню 1</p>
<ul class="menu">
	<li><a href="#" class="heading">Button</a></li>
	<li><a href="#" class="heading1">Button2</a></li>
</ul>
<p>Меню 2</p>
<ul class="menu2">
	<li><p><a href="#" class="heading">Button</a></p></li>
	<li><p><a href="#" class="heading1">Button2</a></p></li>
</ul>
<div class="content">Lorem ipsum dolor sit amet</div>
<div class="content1">Lorem ipsum dolor sit amet2</div>
</body>
</html>

cheba

12.07.2012 11:56

=) Супер! Только при закрытии остается активной почему-то.

cheba

13.07.2012 09:41

Это сделать нельзя?

cheba

16.07.2012 09:41

Помогите пожалуйста! Как мне при закрытии блока убрать выдиление ссылки (active)

cheba

17.07.2012 07:37

Если увеличить количество меню - ничего не пашет

Deff	17.07.2012 12:03

<style type="text/css">
a.Active {
 color:red;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("ul.menu li  a").click(function(){
        var Z=$(this).hasClass('Active');
        $("ul.menu li a").removeClass('Active');
        var FindClass = $(this).attr('class')
        $("#Wrap div").slideUp(500);
        if(!Z){
           $("ul.menu li  a."+FindClass).each(function(){
                $(this).addClass('Active');
           });
           $("#Wrap ."+FindClass).slideToggle(500);
        }
	return false;
  }); 
});
</script>
 
<style type="text/css">
#Wrap div{
 display:none;
}
</style>


<p>Меню 1</p>
<ul class="menu">
	<li><a href="#" class="head-1">Button</a></li>
	<li><a href="#" class="head-2">Button2</a></li>
	<li><a href="#" class="head-3">Button3</a></li>
</ul>
<p>Меню 2</p>
<ul class="menu">
	<li><p><a href="#" class="head-1">Button</a></p></li>
	<li><p><a href="#" class="head-2">Button2</a></p></li>
	<li><a href="#" class="head-3">Button3</a></li>
</ul>
<p>Меню 3</p>
<ul class="menu">
	<li><a href="#" class="head-1">Button</a></li>
	<li><a href="#" class="head-2">Button2</a></li>
	<li><a href="#" class="head-3">Button3</a></li>
</ul>


<div id="Wrap">
<div class="content head-1">Lorem ipsum dolor sit amet</div>
<div class="content head-2">Lorem ipsum dolor sit amet2</div>
<div class="content head-3">Lorem ipsum dolor sit amet3</div>
</div>

cheba

18.07.2012 16:37

все замечательно! =)
Получается что когда нажимаешь в одном меню - становится активной именно там где нажал, а надо чтобы активными становились все с одинаковым классом (даже где не нажимал ссылку но класс одинаковый)

Deff	18.07.2012 17:01

cheba,
Поправил

cheba

19.07.2012 19:40

Блин -( Получается что при закрытии тест он опять открывается

т.е Button нажимаю открывается, еше раз нажимаю, открывается и закрывается, а не просто закрывается =)

Deff	19.07.2012 19:50

cheba,

? Решил измучать доп условиями ?
Поправил!

cheba

19.07.2012 23:27

:cray: Прошу прощения... Сам в шоке от себя что не смог сразу внятно объяснить что надо =(((

Часовой пояс GMT +3, время: 09:36.