Jak na stronie zrobić klika spolierów?

Saver · 14 Czerwiec 2010 14:31

Cześć

Cześć1

Cześć2

Cześć3
[/code]

Zrobiłem coś takiego ale za każdym razem otwiera się ten pierwszy spolier, a jak zrobić żeby po kliknięci na każdy button otwierał się osobny spolier?

Próbowałem także przez pokazSpoiler1(this), pokazSpoiler2(this) … i wkleić 4 razy kod js z pokazSpoiler1(obj), pokazSpoiler2(obj)… i też nie działa.

Może mi ktoś w tym pomóc?

Dyzio23 · 14 Czerwiec 2010 15:06

A co to jest spolier?

reyder · 14 Czerwiec 2010 17:00

rt

rast

[/code]

jj_el · 14 Czerwiec 2010 17:14

przemol96 · 14 Czerwiec 2010 17:15

Albo coś takiego:

do css

/* */<br />
#menu7 {<br />
	width: 200px;<br />
	margin: 10px;<br />
	padding: 0;<br />
}<br />
<br />
#menu7 dt {<br />
	background-color: #888;<br />
	color: #fff;<br />
	font-weight: bold;<br />
	text-align: center;<br />
	cursor: pointer;<br />
	margin: 10px 0 0 0;<br />
	padding: 2px;<br />
}<br />
<br />
#menu7 dd {<br />
	background-color: #eee;<br />
	color: #000;<br />
	border-width: 0 1px 1px 1px;<br />
	border-style: solid;<br />
	border-color: #888;<br />
	margin: 0;<br />
	padding: 1px 5px;<br />
}<br />
<br />
#menu7 dd.active {<br />
	font-weight: bold;<br />
}<br />
<br />
.menu8, .menu8 dl {<br />
	line-height: normal;<br />
	font-size: 12px;<br />
	position: absolute;<br />
	width: 150px;<br />
	margin: 0;<br />
	padding: 0;<br />
	border-width: 1px;<br />
	border-style: solid;<br />
	border-color: #eee #aaa #aaa #eee;<br />
}<br />
<br />
.menu8 dt {<br />
	cursor: pointer;<br />
	margin: 0;<br />
	padding: 0;<br />
	background-color: #888;<br />
	color: #fff;<br />
	text-align: center;<br />
	font-weight: bold;<br />
	font-size: 14px;<br />
	border-width: 1px;<br />
	border-style: solid;<br />
	border-color: #aaa #666 #666 #aaa;<br />
	padding: 4px 5px;<br />
}<br />
<br />
.menu8 dl dt {<br />
	background-color: #ccc;<br />
	color: #000;<br />
	text-align: left;<br />
	font-weight: normal;<br />
	font-size: 12px;<br />
	border: 0;<br />
	padding: 0;<br />
}<br />
<br />
.menu8 dd {<br />
	background-color: #ccc;<br />
	color: #000;<br />
	margin: 0;<br />
	padding: 0;<br />
	width: 150px;<br />
	height: 22px;<br />
}<br />
<br />
.menu8 dd.active {<br />
	font-weight: bold;<br />
}<br />
<br />
#CONTENT .menu8 dt a {<br />
	background: url("../pliki/submenu.gif") no-repeat 140px 8px;<br />
	padding-right: 20px;<br />
}<br />
<br />
#CONTENT .menu8 a:link, #CONTENT .menu8 a:visited {<br />
	display: block;<br />
	color: #000;<br />
	border: 0;<br />
	text-decoration: none;<br />
	padding: 4px 5px;<br />
}<br />
<br />
#CONTENT .menu8 a:hover {<br />
	color: #fff;<br />
	background-color: #008;<br />
}<br />
<br />
.menu8 dl {<br />
	position: absolute;<br />
	border: 0;<br />
}<br />
<br />
.menu8 dl dd {<br />
	position: relative;<br />
	left: 151px;<br />
	bottom: 22px;<br />
	border-left: 1px solid #eee;<br />
	border-right: 1px solid #aaa;<br />
}<br />
<br />
.menu {<br />
	position: relative;<br />
}<br />
<br />
.menu dl {<br />
	width: 150px;<br />
	margin: 0;<br />
	padding: 0;<br />
	border-width: 1px;<br />
	border-style: solid;<br />
	border-color: #aaa #666 #666 #aaa;<br />
}<br />
<br />
.menu dt {<br />
	margin: 0;<br />
	padding: 2px 5px;<br />
	cursor: pointer;<br />
	background-color: #888;<br />
	color: #fff;<br />
	font-weight: bold;<br />
	text-align: center;<br />
}<br />
<br />
.menu dd {<br />
	margin: 0;<br />
	padding: 2px 5px;<br />
	background-color: #ccc;<br />
	color: #000;<br />
}<br />
/* */

do pliku spoiler.js wstawiasz tak do head:

// <br />
/**<br />
 * @author Sławomir Kokłowski {@link http://www.kurshtml.boo.pl}<br />
 * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!)<br />
 */<br />
<br />
function Menu(id, style, otworz, wysun, czasRozwin, czasZwin, czasOtworz, czasZamknij, nieInicjalizuj)<br />
{<br />
	if (typeof czasRozwin == 'undefined' || czasRozwin < 0) czasRozwin = 25;<br />
	if (typeof czasZwin == 'undefined' || czasZwin < 0) czasZwin = 25;<br />
	if (typeof czasOtworz == 'undefined' || czasOtworz < 0) czasOtworz = 250;<br />
	if (typeof czasZamknij == 'undefined' || czasZamknij < 0) czasZamknij = 500;<br />
	<br />
	var url = unescape(window.location.href.replace(/#.*/, ''));<br />
	var base = window.location.protocol + '//' + window.location.host + window.location.pathname.replace(/[^&#092;/&#092;&#092;]+$/, '');<br />
	<br />
	if (style)<br />
	{<br />
		if (style.indexOf(':') < 0)<br />
		{<br />
			document.getElementById(id).className += ' ' + style;<br />
		}<br />
		else<br />
		{<br />
			style = style.replace(/(^&#092;s+|(&#092;s|;)+$)/g, '').split(/&#092;s*;&#092;s*/);<br />
			for (var i = 0; i < style.length; i++)<br />
			{<br />
				style[i] = style[i].split(/&#092;s*:&#092;s*/);<br />
				for (var j = 0, c, property = ''; j < style[i][0].length; j++)<br />
				{<br />
					c = style[i][0].charAt(j);<br />
					property += c == '-' ? style[i][0].charAt(++j).toUpperCase() : c.toLowerCase();<br />
				}<br />
				eval('document.getElementById("' + id + '").style.' + property + ' = "' + style[i][1].replace(/"/g, '&#092;&#092;"') + '"');<br />
			}<br />
		}<br />
	}<br />
	<br />
	for (var i = 0; i < document.getElementById(id).getElementsByTagName('dt').length; i++)<br />
	{<br />
		var dd = new Array();<br />
		var el = document.getElementById(id).getElementsByTagName('dt')[i].nextSibling;<br />
		var nodeName;<br />
		while (el && (nodeName = el.nodeName.toLowerCase()) != 'dt')<br />
		{<br />
			if (nodeName == 'dd')<br />
			{<br />
				el._dt = document.getElementById(id).getElementsByTagName('dt')[i];<br />
				if (otworz)<br />
				{<br />
					el.onmouseover = function()<br />
					{<br />
						clearTimeout(this._dt._timoutID);<br />
						this._dt._displayed = false;<br />
						this._dt.onclick();<br />
					}<br />
					el.onmouseout = function()<br />
					{<br />
						clearTimeout(this._dt._timoutID);<br />
						var dt = this._dt;<br />
						this._dt._timoutID = setTimeout(function () { dt._displayed = true; dt.onclick(); }, czasZamknij);<br />
					};<br />
				}<br />
				dd[dd.length] = el;<br />
			}<br />
			el = el.nextSibling;<br />
		}<br />
		document.getElementById(id).getElementsByTagName('dt')[i]._dd = dd;<br />
		document.getElementById(id).getElementsByTagName('dt')[i]._timoutID = null;<br />
		document.getElementById(id).getElementsByTagName('dt')[i]._displayed = false;<br />
		document.getElementById(id).getElementsByTagName('dt')[i].onclick = function()<br />
		{<br />
			clearTimeout(this._timoutID);<br />
			if (!this._displayed)<br />
			{<br />
				var el = this.parentNode.getElementsByTagName('dt')[0];<br />
				while (el)<br />
				{<br />
					if (el.nodeName.toLowerCase() == 'dt' && el != this)<br />
					{<br />
						el._displayed = false;<br />
						if (czasZwin) display(el, 0);<br />
						else display(el);<br />
					}<br />
					el = el.nextSibling;<br />
				}<br />
			}<br />
			this._displayed = !this._displayed;<br />
			if (this._displayed && czasRozwin || !this._displayed && czasZwin) display(this, 0);<br />
			else display(this);<br />
		};<br />
		if (otworz)<br />
		{<br />
			document.getElementById(id).getElementsByTagName('dt')[i].onmouseover = function()<br />
			{<br />
				clearTimeout(this._timoutID);<br />
				var dt = this;<br />
				this._timoutID = setTimeout(function () { dt._displayed = false; dt.onclick(); }, czasOtworz);<br />
			};<br />
			document.getElementById(id).getElementsByTagName('dt')[i].onmouseout = function()<br />
			{<br />
				clearTimeout(this._timoutID);<br />
				var dt = this;<br />
				this._timoutID = setTimeout(function () { dt._displayed = true; dt.onclick(); }, czasZamknij);<br />
			};<br />
		}<br />
	}<br />
	<br />
	start(document.getElementById(id).getElementsByTagName('dt')[0]);<br />
	<br />
	function start(dt)<br />
	{<br />
		var hide = true;<br />
		var el = dt;<br />
		while (el)<br />
		{<br />
			var nodeName = el.nodeName.toLowerCase();<br />
			if (nodeName == 'dt')<br />
			{<br />
				dt = el;<br />
				hide = true;<br />
			}<br />
			if (nodeName == 'dt' || nodeName == 'dd')<br />
			{<br />
				if (!nieInicjalizuj && el.getElementsByTagName('a').length)<br />
				{<br />
					var active = el.getElementsByTagName('a')[0].href && unescape(el.getElementsByTagName('a')[0].href.replace(/#.*/, '')) == url;<br />
					if (!active)<br />
					{<br />
						var rel = el.getElementsByTagName('a')[0].getAttribute('rel');<br />
						if (rel)<br />
						{<br />
							var matches = (' ' + rel + ' ').match(/&#092;s+Collection&#092;(([^)]+)&#092;)&#092;s+/i);<br />
							if (matches)<br />
							{<br />
								matches = matches[1].split(',');<br />
								for (var k = 0, pos = -1; k < matches.length; k++)<br />
								{<br />
									if (matches[k].charAt(0) == '[' && (pos = matches[k].lastIndexOf(']')) > 0)<br />
									{<br />
										if (new RegExp(unescape(matches[k].substring(1, pos)), matches[k].substring(pos + 1)).test(url))<br />
										{<br />
											active = true;<br />
											break;<br />
										}<br />
									}<br />
									else<br />
									{<br />
										if (/^[&#092;/&#092;&#092;]/.test(matches[k])) matches[k] = window.location.protocol + '//' + window.location.host + matches[k];<br />
										else if (!/^[a-z0-9]+:/i.test(matches[k])) matches[k] = base + matches[k];<br />
										if (unescape(matches[k].replace(/[&#092;/&#092;&#092;]&#092;.([&#092;/&#092;&#092;])/g, '$1').replace(/[^&#092;/&#092;&#092;]+[&#092;/&#092;&#092;]&#092;.&#092;.[&#092;/&#092;&#092;]/g, '').replace(/#.*/, '')) == url)<br />
										{<br />
											active = true;<br />
											break;<br />
										}<br />
									}<br />
								}<br />
							}<br />
						}<br />
					}<br />
					if (active)<br />
					{<br />
						el.className = (el.className ? el.className + ' ' : '') + 'active';<br />
						dt._displayed = true;<br />
						display(dt);<br />
						hide = false;<br />
						var el_parentNode = el.parentNode;<br />
						while (el_parentNode != document.getElementById(id))<br />
						{<br />
							if (el_parentNode.nodeName.toLowerCase() == 'dd')<br />
							{<br />
								var el_sibling = el_parentNode.previousSibling;<br />
								while (el_sibling)<br />
								{<br />
									if (el_sibling.nodeName.toLowerCase() == 'dt')<br />
									{<br />
										el_sibling._displayed = true;<br />
										display(el_sibling)<br />
										break;<br />
									}<br />
									el_sibling = el_sibling.previousSibling;<br />
								}<br />
							}<br />
							el_parentNode = el_parentNode.parentNode;<br />
						}<br />
					}<br />
				}<br />
			}<br />
			if (nodeName == 'dd')<br />
			{<br />
				if (hide) el.style.display = 'none';<br />
				start(el.getElementsByTagName('dt')[0]);<br />
			}<br />
			el = el.nextSibling;<br />
		}<br />
	}<br />
	<br />
	function display(dt, i)<br />
	{<br />
		if (typeof i == 'undefined')<br />
		{<br />
			for (var i = 0; i < dt._dd.length; i++)<br />
			{<br />
				dt._dd[i].style.display = dt._displayed ? 'block' : 'none';<br />
				if (!dt._displayed)<br />
				{<br />
					for (var j = 0; j < dt._dd[i].getElementsByTagName('dt').length; j++)<br />
					{<br />
						dt._dd[i].getElementsByTagName('dt')[j]._displayed = false;<br />
						display(dt._dd[i].getElementsByTagName('dt')[j]);<br />
					}<br />
				}<br />
			}<br />
		}<br />
		else if (i < dt._dd.length)<br />
		{<br />
			var dir = wysun ? !dt._displayed : dt._displayed;<br />
			var n = dir ? i : dt._dd.length - 1 - i;<br />
			dt._dd[n].style.display = dt._displayed ? 'block' : 'none';<br />
			if (!dt._displayed)<br />
			{<br />
				for (var j = 0; j < dt._dd[n].getElementsByTagName('dt').length; j++)<br />
				{<br />
					dt._dd[n].getElementsByTagName('dt')[j]._displayed = false;<br />
					display(dt._dd[n].getElementsByTagName('dt')[j]);<br />
				}<br />
			}<br />
			dt._timoutID = setTimeout(function() { display(dt, i + 1); }, dt._displayed ? czasRozwin : czasZwin);<br />
		}<br />
	}<br />
}<br />
//

do pliku html w body

: Cześć 1
: Cześć 2
: Cześć 3
: Cześć 4

[/code]