Показать сообщение отдельно
  #1 (permalink)  
Старый 05.06.2014, 23:40
Новичок на форуме
Отправить личное сообщение для follow_me Посмотреть профиль Найти все сообщения от follow_me
 
Регистрация: 05.06.2014
Сообщений: 8

id в class не работают
Помогите пожалуйста. Я незнаю js, а работу делать надо. Нашел сайт где можно делать диаграммы онлайн. Хотел вставить на страницу две диаграммы, чтобы сворачивать и разворачивать элемент, но никак не выходит. Делал на примере,
<html>
<head>
<title>Показать/скрыть</title>
<style type="text/css">
.showhide{
cursor: pointer;
}
.showhide-all{
    display:none;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>

		<!-- amCharts javascript sources -->
		<script type="text/javascript" src="http://cdn.amcharts.com/lib/3/amcharts.js"></script>
		<script type="text/javascript" src="http://cdn.amcharts.com/lib/3/radar.js"></script>
		<script type="text/javascript" src="http://cdn.amcharts.com/lib/3/themes/dark.js"></script>
		
				<!-- amCharts javascript sources -->
		<script type="text/javascript" src="http://cdn.amcharts.com/lib/3/amcharts.js"></script>
		<script type="text/javascript" src="http://cdn.amcharts.com/lib/3/serial.js"></script>
 
<script type="text/javascript">
$(document).ready(function() {
$('.showhide').click(function() {
$('.showhide-all').slideUp(500);
$(this).next('div').filter(function () {return $(this).css('display')=='block'}).slideUp(500);
$(this).next('div').filter(function() {return $(this).css('display')=='none'}).slideDown(500);
});
});
</script>

<!-- amCharts javascript code -->
		<script type="text/javascript">
			AmCharts.makeChart("chartdiv",
				{
					"type": "radar",
					"pathToImages": "http://cdn.amcharts.com/lib/3/images/",
					"categoryField": "country",
					"radius": "25%",
					"startDuration": 2,
					"handDrawScatter": 7,
					"percentPrecision": 3,
					"theme": "dark",
					"graphs": [
						{
							"balloonText": "[[value]] litres of beer per year",
							"bullet": "round",
							"id": "AmGraph-1",
							"valueField": "litres"
						}
					],
					"guides": [],
					"valueAxes": [
						{
							"axisTitleOffset": 20,
							"id": "ValueAxis-1",
							"minimum": 0,
							"position": "right",
							"axisAlpha": 0.15
						}
					],
					"allLabels": [],
					"balloon": {},
					"titles": [],
					"dataProvider": [
						{
							"country": "Транспорт",
							"litres": "3"
						},
						{
							"country": "Санитарные нормы",
							"litres": "3"
						},
						{
							"country": "Фитосанитарные нормы",
							"litres": "3.5"
						},
						{
							"country": "Сертификация",
							"litres": "4"
						}
					]
				}
			);
		</script>
		
				<!-- amCharts javascript code -->
		<script type="text/javascript">
			AmCharts.makeChart("chartdiv1",
				{
					"type": "serial",
					"pathToImages": "http://cdn.amcharts.com/lib/3/images/",
					"categoryField": "Not set",
					"startDuration": 1,
					"categoryAxis": {
						"gridPosition": "start"
					},
					"trendLines": [],
					"graphs": [
						{
							"balloonText": "[[title]] of [[category]]:[[value]]",
							"fillAlphas": 1,
							"id": "AmGraph-1",
							"title": "graph 1",
							"type": "column",
							"valueField": "column-1"
						},
						{
							"balloonText": "[[title]] of [[category]]:[[value]]",
							"fillAlphas": 1,
							"id": "AmGraph-2",
							"title": "graph 2",
							"type": "column",
							"valueField": "column-2"
						}
					],
					"guides": [],
					"valueAxes": [
						{
							"id": "ValueAxis-1",
							"title": "Axis title"
						}
					],
					"allLabels": [],
					"balloon": {},
					"legend": {
						"useGraphSettings": true
					},
					"titles": [
						{
							"id": "Title-1",
							"size": 15,
							"text": "Chart Title"
						}
					],
					"dataProvider": [
						{
							"category": "category 1",
							"column-1": 8,
							"column-2": 5
						},
						{
							"category": "category 2",
							"column-1": 6,
							"column-2": 7
						},
						{
							"category": "category 3",
							"column-1": 2,
							"column-2": 3
						}
					]
				}
			);
		</script>

</head>
<body>
<div class="showhide">Показать/скрыть 1</div>
<div class="showhide-all">
<div id="chartdiv" style="width: 100%; height: 400px; background-color: #282828;" ></div>
</div>
 
 
 
<div class="showhide">Показать/скрыть 2</div>
<div class="showhide-all">
<div id="chartdiv1" style="width: 100%; height: 400px; background-color: #282828;" ></div>
</div>
 
 
<div class="showhide">Показать/скрыть 3</div>
<div class="showhide-all">
Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст.
</div>
 
 
 
<div class="showhide">Показать/скрыть 4</div>
<div class="showhide-all">
Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст.
</div>
 
</body>
</html>
Ответить с цитированием