Expand/Colaps text
3 отговора
65 прегледа
Expand/Colaps text
Тъй като не можах да се сетя каква беше функцията на РНР/MySQL да прочете определен брой редове от таблица, реших да ползвам това:
<html>
<head>
<script language="javascript">
var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) { if (ie4) { return document.all[id]; } else { return document.getElementById(id); } }
function toggle(link, divId) { var lText = link.innerHTML; var d = getObject(divId);
if (lText == 'TEST_TEXT') { link.innerHTML = 'TEST_TEXT /скрий/'; d.style.display = 'block'; }
else { link.innerHTML = 'TEST_TEXT'; d.style.display = 'none'; } }
</script>
</head>
<body>
<div style="border: 1px solid #000000; padding: 0px; background: #EEEEEE; "><table border="0" cellspacing="0" cellpadding="2" width="100%" style="background: #000000; color: #FFFFFF; "><tr><td align="left">
[<a title="show/hide" id="exp_test_link" href="javascript: void(0);" onclick="toggle(this, 'exp_test');" style="text-decoration: none; color: #FFFFFF; ">TEST_TEXT/скрий/</a>]</td></tr></table>
<div id="exp_test" style="padding: 3px;">TEST TEXT HERE... TEST TEXT HERE... TEST TEXT HERE... TEST TEXT HERE... TEST TEXT HERE... TEST TEXT HERE... </div>
</div>
<script language="javascript">toggle(getObject('exp_test_link'), 'exp_test');</script>
</body>
Та реших да питам дали някой ще бъде така добър да ми подскаже какво да попроменя та да стане функцията универсална и да не се налага да я преписвам 100 пъти ако искам да имам такива полета повечко на един сайт... Мноооо благодаря!
<html>
<head>
<script language="javascript">
var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) { if (ie4) { return document.all[id]; } else { return document.getElementById(id); } }
function toggle(link, divId) { var lText = link.innerHTML; var d = getObject(divId);
if (lText == 'TEST_TEXT') { link.innerHTML = 'TEST_TEXT /скрий/'; d.style.display = 'block'; }
else { link.innerHTML = 'TEST_TEXT'; d.style.display = 'none'; } }
</script>
</head>
<body>
<div style="border: 1px solid #000000; padding: 0px; background: #EEEEEE; "><table border="0" cellspacing="0" cellpadding="2" width="100%" style="background: #000000; color: #FFFFFF; "><tr><td align="left">
[<a title="show/hide" id="exp_test_link" href="javascript: void(0);" onclick="toggle(this, 'exp_test');" style="text-decoration: none; color: #FFFFFF; ">TEST_TEXT/скрий/</a>]</td></tr></table>
<div id="exp_test" style="padding: 3px;">TEST TEXT HERE... TEST TEXT HERE... TEST TEXT HERE... TEST TEXT HERE... TEST TEXT HERE... TEST TEXT HERE... </div>
</div>
<script language="javascript">toggle(getObject('exp_test_link'), 'exp_test');</script>
</body>
Та реших да питам дали някой ще бъде така добър да ми подскаже какво да попроменя та да стане функцията универсална и да не се налага да я преписвам 100 пъти ако искам да имам такива полета повечко на един сайт... Мноооо благодаря!
Редактирано от Stone Cold Austin на
Re: Expand/Colaps text
според мен трябва да се вкарат променливи тука:
if (lText == 'TEST_TEXT') { link.innerHTML = 'TEST_TEXT /скрий/'; d.style.display = 'block'; }
else { link.innerHTML = 'TEST_TEXT'; d.style.display = 'none'; } }
или бъркам?...
if (lText == 'TEST_TEXT') { link.innerHTML = 'TEST_TEXT /скрий/'; d.style.display = 'block'; }
else { link.innerHTML = 'TEST_TEXT'; d.style.display = 'none'; } }
или бъркам?...
Редактирано от Stone Cold Austin на
е т'ва е решението, ако някой се интересува...
<script language="javascript">
var ie4 = false;
if(document.all) {
ie4 = true;
}
function getObject(id) {
if (ie4) {
return document.all[id];
} else {
return document.getElementById(id);
}
}
function toggle(link, divId) {
var lText = link.innerHTML;
var d = getObject(divId);
if (lText == '+') {
link.innerHTML = '−';
d.style.display = 'block';
} else {
link.innerHTML = '+';
d.style.display = 'none';
}
}
</script>
<table border="0" width="70%" align="center"><tr><td>
<div style="border: 1px solid #000000; padding: 0px;">
<table border="0" cellspacing="0" cellpadding="2" width="100%">
<tr><td>Expandable Box:</td>
<td align="right">
[<a title="show/hide" id="exp_link" href="javascript:void(0);" onclick="toggle(this, 'exp');">−</a>]
</td></tr></table>
<div id="exp" style="padding:3px;">
The text in this box is not visible by default, but becomes visible when the box
is expanded.
<p>
You can collapse the box back, hiding the text - just click the minus sign in the title bar.
<p>
P.S. You can use <b>HTML Codes</b> and
<img src="[линк]">
images, in the boxes as well!
</div>
</div>
<script language="javascript">toggle(getObject('exp_link'), 'exp');</script>
</td></tr></table>
<table border="0" width="70%" align="center"><tr><td>
<div style="border: 1px solid #000000; padding: 0px;">
<table border="0" cellspacing="0" cellpadding="2" width="100%">
<tr><td>Another Box:</td>
<td align="right">
[<a title="show/hide" id="exp1_link" href="javascript:void(0);" onclick="toggle(this, 'exp1');">−</a>]
</td></tr></table>
<div id="exp1" style="padding:3px;">
The text in this box is not visible by default, but becomes visible when the box
is expanded.
<p>
You can collapse the box back, hiding the text - just click the minus sign in the title bar.
<p>
P.S. You can use <b>HTML Codes</b> and
<img src="[линк]">
images, in the boxes as well!
</div>
</div>
<script language="javascript">toggle(getObject('exp1_link'), 'exp1');</script>
</td></tr>
<tr><td>
<div style="border: 1px solid #000000; padding: 0px;">
<table border="0" cellspacing="0" cellpadding="2" width="100%">
<tr><td>Yet Another Box:</td>
<td align="right">
[<a title="show/hide" id="exp2_link" href="javascript:void(0);" onclick="toggle(this, 'exp2');">−</a>]
</td></tr></table>
<div id="exp2" style="padding:3px;">
The text in this box is not visible by default, but becomes visible when the box
is expanded.
<p>
You can collapse the box back, hiding the text - just click the minus sign in the title bar.
<p>
P.S. You can use <b>HTML Codes</b> and
<img src="[линк]">
images, in the boxes as well!
</div>
</div>
<script language="javascript">toggle(getObject('exp2_link'), 'exp2');</script>
</td></tr>
</table>
var ie4 = false;
if(document.all) {
ie4 = true;
}
function getObject(id) {
if (ie4) {
return document.all[id];
} else {
return document.getElementById(id);
}
}
function toggle(link, divId) {
var lText = link.innerHTML;
var d = getObject(divId);
if (lText == '+') {
link.innerHTML = '−';
d.style.display = 'block';
} else {
link.innerHTML = '+';
d.style.display = 'none';
}
}
</script>
<table border="0" width="70%" align="center"><tr><td>
<div style="border: 1px solid #000000; padding: 0px;">
<table border="0" cellspacing="0" cellpadding="2" width="100%">
<tr><td>Expandable Box:</td>
<td align="right">
[<a title="show/hide" id="exp_link" href="javascript:void(0);" onclick="toggle(this, 'exp');">−</a>]
</td></tr></table>
<div id="exp" style="padding:3px;">
The text in this box is not visible by default, but becomes visible when the box
is expanded.
<p>
You can collapse the box back, hiding the text - just click the minus sign in the title bar.
<p>
P.S. You can use <b>HTML Codes</b> and
<img src="[линк]">
images, in the boxes as well!
</div>
</div>
<script language="javascript">toggle(getObject('exp_link'), 'exp');</script>
</td></tr></table>
<table border="0" width="70%" align="center"><tr><td>
<div style="border: 1px solid #000000; padding: 0px;">
<table border="0" cellspacing="0" cellpadding="2" width="100%">
<tr><td>Another Box:</td>
<td align="right">
[<a title="show/hide" id="exp1_link" href="javascript:void(0);" onclick="toggle(this, 'exp1');">−</a>]
</td></tr></table>
<div id="exp1" style="padding:3px;">
The text in this box is not visible by default, but becomes visible when the box
is expanded.
<p>
You can collapse the box back, hiding the text - just click the minus sign in the title bar.
<p>
P.S. You can use <b>HTML Codes</b> and
<img src="[линк]">
images, in the boxes as well!
</div>
</div>
<script language="javascript">toggle(getObject('exp1_link'), 'exp1');</script>
</td></tr>
<tr><td>
<div style="border: 1px solid #000000; padding: 0px;">
<table border="0" cellspacing="0" cellpadding="2" width="100%">
<tr><td>Yet Another Box:</td>
<td align="right">
[<a title="show/hide" id="exp2_link" href="javascript:void(0);" onclick="toggle(this, 'exp2');">−</a>]
</td></tr></table>
<div id="exp2" style="padding:3px;">
The text in this box is not visible by default, but becomes visible when the box
is expanded.
<p>
You can collapse the box back, hiding the text - just click the minus sign in the title bar.
<p>
P.S. You can use <b>HTML Codes</b> and
<img src="[линк]">
images, in the boxes as well!
</div>
</div>
<script language="javascript">toggle(getObject('exp2_link'), 'exp2');</script>
</td></tr>
</table>
Re: е т'ва е решението, ако някой се интересува...
само променяш редовете:
[<a title="show/hide" id="exp_link" href="javascript:void(0);" onclick="toggle(this, 'exp');">
<div id="exp" style="padding:3px;">
<script language="javascript">toggle(getObject('exp_link'), 'exp');</script>
на:
exp1_link, exp2_link,... exp1000_link и exp1, exp2, exp1000
T'ва е, НЯМА НЕВЪЗМОЖНИ НЕЩА! ДА ПОБЛЪСКАМЕ ЗАЕДНО!
[<a title="show/hide" id="exp_link" href="javascript:void(0);" onclick="toggle(this, 'exp');">
<div id="exp" style="padding:3px;">
<script language="javascript">toggle(getObject('exp_link'), 'exp');</script>
на:
exp1_link, exp2_link,... exp1000_link и exp1, exp2, exp1000
T'ва е, НЯМА НЕВЪЗМОЖНИ НЕЩА! ДА ПОБЛЪСКАМЕ ЗАЕДНО!