Выпадающий текст

[kda7979]

Подскажите пожалуйста, как сделать чтобы к примеру абзац текста был спрятан за строчкой с плюсиком при нажатии на которую он бы разворачивался.

Хочу просто сделать описание платёжных систем на страничке об оплате, если помещать всё подряд да ещё и с картинками это очень большой объём получается, а так бы просто названия систем с плюсом, при нажатии открывается тут же описание, при нажатии на другой плюсик - это описание закрывается и открывается следующее.

Это возможно сделать?

[Ander61rus]

{TEXT}

. Только в html надо найти

[cmd]

Вот тут есть готовые решения с пояснениями.

[Ander61rus]

блин..

называется (бб код), в html кажется на базе простого скрипта делается

[cmd]

Ну, раз уж мы на форуме OC, то скажу, что в OC подключается библиотека jQuery. А в jQuery есть оператор toggle

[kda7979]

Вот тут есть готовые решения с пояснениями.

я умею пользоваться поиском, если бы было нужно научиться этому - я бы так и попросила.

вопрос стоит как и куда в админке при редактировании текста (повторяю средствами админки) можно что-нибудь прописать для достижения данного эффекта.

[kda7979]

должен сработать вот этот кусок кода:

[spoiler=Заголовок]

второй пример

[/spoiler]

но когда я его в админке вставляю в текст то ничего не происходит а на странице он печатается как просто кусок текста

[qwerty]

http://stinto.ru/diy/hide-text-under-the-spoiler-in-opencart/

[kda7979]

http://stinto.ru/diy...er-in-opencart/

огромное спасибо!

[sgb84]

http://stinto.ru/diy/hide-text-under-the-spoiler-in-opencart/

 

С помощью данного решения у меня не получилось решить свою задачу, а именно оформить вопросы страницы FAQ с выпадающими ответами при нажатии на вопрос. Скрипт не предусматривал вариант нескольких ссылок подряд (как в случае с FAQ ), а я не владею никакими знаниями программирования, могу только скопировать и вставить :) .

Дальнейшие поиски привели меня вот к этой статье с готовым решением моей задачи:

 

Выпадающий текст при нажатии на ссылку

 

Выпадающий текст при нажатии на ссылку - 2 часть

 

Продублирую статьи тут на случай если статью уберут с сайта или сайт закроют:

 

 

 

Выпадающий текст при нажатии на ссылку

Данный способ хорош тем, что при повторном нажатии на ссылку текст "прячется" обратно.

1. Необходимо на странице, где мы хотим сделать выпадающий текст разместить небольшой скрипт:

<script>
 function collapsElement(id) {
 if ( document.getElementById(id).style.display != "none" ) {
 document.getElementById(id).style.display = 'none';
 }
 else {
 document.getElementById(id).style.display = '';
 }
 }
 </script>

2. В том месте где должна быть ссылка с выпадающим текстом размещаем следующий код:

<div><a href="javascript:collapsElement('identifikator')" title="" rel="nofollow">Текст ссылки</a>
<div id="identifikator" style="display: none">
<p>Текст текст текст текст</p>
</div>
</div>

 Теперь при нажатии на ссылку "Текст ссылки" она раскроется и появится текст "Текст текст текст текст". При повторном нажатии текст скроется.

Как видно из кода ссылка закрыта от индексирования. Это сделано, потому что поисковики такую ссылку не могут нормально обработь и выдают ответ, что такая страница не найдена. Это пожалую основной минус данного метода, впрочем, как и большинства других.

Плюсы данного метода:

 - минимум кода (это важно если расскрывающихся ссылок много), а для использования в Joomla код скрипта можно записать в модуль (например используя Special HTML for Joomla 1.5.x ) и выводить через loadposition на тех страницах, где он необходим;

- можно сделать многоуровненвый раскрывающийся список (см. пример по ссылке в начале статьи).

Пример одноуровневого списка

В следующей статье мы рассмотрим способ создания выпадающего текста, при которм каждая последующаяя нажатая (раскрытая) ссылка будет закрывать предыдущую.

P.S. Используем плавное открыте ссылок. Здесь строка "onclick="show('hidden_1',200,5)" отвечает за высоту блока и скорость его открытия. Так первая ссылка (скорость открытия 5) откроется быстрее, чем вторая (скорость открытия 3).

<div><a href="#open1" onclick="show('hidden_1',200,5)">Ссылка 1</a></div>
<div id=hidden_1 style="display:none;height:200px;width:350px;background-color:#f0f0f0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
 
<div><a href="#open2" onclick="show('hidden_2',200,3)">Ссылка 2</a></div> 
<div id=hidden_2 style="display:none;height:200px;width:350px;background-color:#f0f0f0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
 <script language="JavaScript" type="text/javascript">
 /*<![CDATA[*/
 var s=[],s_timer=[];
 function show(id,h,spd)
 { s[id]= s[id]==spd? -spd : spd;
 s_timer[id]=setTimeout(function() {
 var obj=document.getElementById(id);
 if(obj.offsetHeight+s[id]>=h){obj.style.height=h+"px";obj.style.overflow="auto";}
 else if(obj.offsetHeight+s[id]<=0){obj.style.height=0+"px";obj.style.display="none";}
 else {obj.style.height=(obj.offsetHeight+s[id])+"px";
 obj.style.overflow="hidden";
 obj.style.display="block";
 setTimeout(arguments.callee, 10);
 }
 }, 10);
 }
 /*]]>*/
 </script>

 

 

 

Выпадающий текст при нажатии на ссылку - 2 часть

В предыдущей статье мы рассмотрели один из способов создания раскрывающегося списка при нажатии на ссылку. В этой статье мы рассмотрим способ, при котором уже раскрытая ссылка автоматически закрывается при нажатии на другую ссылку. 

1. Необходимо на странице, где мы хотим сделать выпадающий текст разместить  скрипт:

<script>
var show;
function hidetxt(type){
 param=document.getElementById(type);
 if(param.style.display == "none") {
 if(show) show.style.display = "none";
 param.style.display = "block";
 show = param;
 }else param.style.display = "none"
}
</script>

2. В том месте где должна быть ссылка с выпадающим текстом размещаем следующий код:

<div>
<a onclick="hidetxt('div1'); return false;" href="#" rel="nofollow">Ссылка 1</a>
<div style="display:none;" id="div1">
Много много много текста 1
</div>
</div>
<div>
<a onclick="hidetxt('div2'); return false;" href="#" rel="nofollow">Ссылка 2</a>
<div style="display:none;" id="div2">
Много много много текста 2
</div>
</div>
<div>
<a onclick="hidetxt('div3'); return false;" href="#" rel="nofollow">Ссылка 3</a>
<div style="display:none;" id="div3">
Много много много текста 3
</div>
</div>

Теперь при нажатии на ссылку "Ссылку 1" она раскроется и появится текст "Много много много текста 1". При нажатии на ссылку "Ссылка 2" или "Ссылка 3" текст первой ссылки скроется, а откроется текст второй или третей ссылки соответственно и т.д.

Как видно из кода ссылка закрыта от индексирования. Это сделано, потому что поисковики такую ссылку не могут нормально обработь и выдают ответ, что такая страница не найдена. 

Плюсы данного метода:

 - минимум кода (это важно если расскрывающихся ссылок много), а код скрипта можно записать в модуль (например используяSpecial HTML for Joomla 1.5.x  ) и выводить через loadposition на тех страницах, где он необходим.

 

Еще один способ с использованием плавного раскрытия:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" />
<title>Раскрывающиеся блоки "div" на JavaScript. Демонстрация.</title>
<style>
#slider {
 width: 508px;
 color: #66666;
 font-family: Georgia;
 font-size: 20px;
 }
.header {
 width: 488px;
 border: 1px solid #cccccc;
 padding: 8px;
 margin-top: 5px;
 cursor: pointer;
 text-align: center;
 }
.header:hover {
 color: #666666;
 }
.content {
 overflow: hidden;
 }
.text {
 width: 474px;
 border: 1px solid #cccccc;
 border-top: none;
 padding: 15px;
 text-align: left;
 background: #eeeeee;
 font-size: 14px;
 }
</style>
<script type="text/javascript">
var array = new Array();
var speed = 10;
var timer = 10;
 
// Loop through all the divs in the slider parent div //
// Calculate seach content divs height and set it to a variable //
function slider(target,showfirst) {
 var slider = document.getElementById(target);
 var divs = slider.getElementsByTagName('div');
 var divslength = divs.length;
 for(i = 0; i < divslength; i++) {
 var div = divs[i];
 var divid = div.id;
 if(divid.indexOf("header") != -1) {
 div.onclick = new Function("processClick(this)");
 } else if(divid.indexOf("content") != -1) {
 var section = divid.replace('-content','');
 array.push(section);
 div.maxh = div.offsetHeight;
 if(showfirst == 1 && i == 1) {
 div.style.display = 'block';
 } else {
 div.style.display = 'none';
 }
 }
 }
}
 
// Process the click - expand the selected content and collapse the others //
function processClick(div) {
 var catlength = array.length;
 for(i = 0; i < catlength; i++) {
 var section = array[i];
 var head = document.getElementById(section + '-header');
 var cont = section + '-content';
 var contdiv = document.getElementById(cont);
 clearInterval(contdiv.timer);
 if(head == div && contdiv.style.display == 'none') {
 contdiv.style.height = '0px';
 contdiv.style.display = 'block';
 initSlide(cont,1);
 } else if(contdiv.style.display == 'block') {
 initSlide(cont,-1);
 }
 }
}
 
// Setup the variables and call the slide function //
function initSlide(id,dir) {
 var cont = document.getElementById(id);
 var maxh = cont.maxh;
 cont.direction = dir;
 cont.timer = setInterval("slide('" + id + "')", timer);
}
 
// Collapse or expand the div by incrementally changing the divs height and opacity //
function slide(id) {
 var cont = document.getElementById(id);
 var maxh = cont.maxh;
 var currheight = cont.offsetHeight;
 var dist;
 if(cont.direction == 1) {
 dist = (Math.round((maxh - currheight) / speed));
 } else {
 dist = (Math.round(currheight / speed));
 }
 if(dist <= 1) {
 dist = 1;
 }
 cont.style.height = currheight + (dist * cont.direction) + 'px';
 cont.style.opacity = currheight / cont.maxh;
 cont.style.filter = 'alpha(opacity=' + (currheight * 100 / cont.maxh) + ')';
 if(currheight < 2 && cont.direction != 1) {
 cont.style.display = 'none';
 clearInterval(cont.timer);
 } else if(currheight > (maxh - 2) && cont.direction == 1) {
 clearInterval(cont.timer);
 }
}
</script>
</head>
<body onload="slider('slider',0)">
<div id="intro">
<p>
<div id="slider">
 <div class="header" id="1-header">Первый блок</div>
 <div class="content" id="1-content">
 <div class="text">
 Содержимое блока.
 </div>
 </div>
 <div class="header" id="2-header">Второй блок</div>
 <div class="content" id="2-content">
 <div class="text">
 Содержимое блока.
 </div>
 </div>
 <div class="header" id="3-header">Третий блок</div>
 <div class="content" id="3-content">
 <div class="text">
 Содержимое блока.
 </div>
 </div>
</div>
</p>
</div>
 

</body>
</html>