Форум

cheba · #1 (**permalink**) 09.07.2012, 16:25

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

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

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

<!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 · #2 (**permalink**) 09.07.2012, 18:21

cheba,
Как сделать смену текста по клику на ссылку?

cheba · #3 (**permalink**) 10.07.2012, 08:54

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

Ищу решения.

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

jeysmook · #4 (**permalink**) 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 · #5 (**permalink**) 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 · #6 (**permalink**) 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 · #7 (**permalink**) 10.07.2012, 19:41

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

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

jeysmook · #8 (**permalink**) 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 · #9 (**permalink**) 12.07.2012, 11:56

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

cheba · #10 (**permalink**) 13.07.2012, 09:41

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

Форум

Справочник

Discord чат

Курсы javascript