Версия для печати темы

Нажмите сюда для просмотра этой темы в обычном формате

Форум о web-дизайне, графике - RusForumz _ Скрипты _ Раскрывающийся текст

Автор: Alexx123 25.4.2008, 9:40

Помогите найти скрипт, который будет делать следующее: при нажатии на строку/ссылку под ней раскрывался бы ещё текст (пару абзацев), а потом при нажатии снова на эту же строку/ссылку текст бы закрывался. Это реализованно, например, в справке Windows - нажимаешь на плюсик - текст раскрывается, нажимаешь ещё раз - закрывается.

Автор: Boo 25.4.2008, 10:56

Примерно так :

<a href="java script:show_hide('BlockName')"> ссылка </a>
<div id="BlockName">
блок, который надо скрыть. показать
</div>
<script>
function show_hide(id)
{
var item = document.getElementById(id);
if (item.style.display == 'none') {item.style.display = 'block';}
else item.style.display = 'none';
}
</script>

Автор: leonoff 30.4.2008, 1:12

ajax сможет помоч!

Автор: 3ABAPKA 30.4.2008, 5:53

Это посмотри!
Это вставь между <html></html>

Код
<script language="JavaScript" type="text/javascript">
//<!--
  function OpenAnsw(ans_id) {
    var obj_ctrl = getObj(ans_id);
    if ( obj_ctrl ) {
      obj_ctrl.style.display = (obj_ctrl.style.display == "none" ? "block" : "none");

    }
  }
  
  function getObj(obj_name, doc_obj) { //get DOM node
    if (!doc_obj) doc_obj = document;
    if (doc_obj.all)
        return doc_obj.all[obj_name];
    else if (doc_obj.getElementById)
        return doc_obj.getElementById(obj_name);
    return null;
}

  
//-->
</script>


Это в body

Код
<div class="" id="qst_6" onclick="OpenAnsw('ans_6');">
             Слово
               <div align="right">
                   <div class="" id="ans_6" style="display: none;">
                    текст который будет появляться и сдвигать ниже идущий текст
                   </div>
               </div>
       </div>


Внимание!!!
обрати внимание на id=""
id="qst_ должен свпадать с id="ans_

Автор: Hippy 30.4.2008, 19:06

Код
<script language="JavaScript1.2">
<!--


var head="display:''"
img1=new Image()
img1.src="fold.gif"
img2=new Image()
img2.src="open.gif"

function change(){
   if(!document.all)
      return
   if (event.srcElement.id=="foldheader") {
      var srcIndex = event.srcElement.sourceIndex
      var nested = document.all[srcIndex+1]
      if (nested.style.display=="none") {
         nested.style.display=''
         event.srcElement.style.listStyleImage="url(open.gif)"
      }
      else {
         nested.style.display="none"
         event.srcElement.style.listStyleImage="url(fold.gif)"
      }
   }
}

document.onclick=change

//-->
</script>
<ul>
  


<li id="foldheader">Рассказы</li>
<ul id="foldinglist" style="display:none" style=&{head};>



        <li id="foldheader">Daniel Defoe</li>    

            <ul id="foldinglist" style="display:none" style=&{head};>    

            <li><a href="stories/Daniel Defoe/Robinson Crusoe.doc">Robinson Crusoe</a></li>

            </ul>




        <li id="foldheader">Jennifer Laura Recio Lebedev</li>    

            <ul id="foldinglist" style="display:none" style=&{head};>    

            <li><a href="stories/Jennifer Laura Recio Lebedev/A visit to my Grandparents.doc">A visit to my Grandparents</a></li>

            <li><a href="stories/Jennifer Laura Recio Lebedev/A week of driving.doc">A week of driving</a></li>

            <li><a href="stories/Jennifer Laura Recio Lebedev/Ivy's Gifts.doc">Ivy's Gifts</a></li>

            </ul>




        <li id="foldheader">O'Henry</li>    

            <ul id="foldinglist" style="display:none" style=&{head};>    

            <li><a href="stories/O Henry/He overdid it.doc">He overdid it</a></li>

            <li><a href="stories/O Henry/The Last Leaf.doc">The Last Leaf</a></li>

            <li><a href="stories/O Henry/The Pancakes.doc">The Pancakes</a></li>

            <li><a href="stories/O Henry/Witches  Loaves.doc">Witches'  Loaves</a></li>

            </ul>



        <li id="foldheader">Oscar Wild</li>    

            <ul id="foldinglist" style="display:none" style=&{head};>    

            <li><a href="stories/Oscar Wild/Birthday Of The Infanta.doc">Birthday Of The Infanta</a></li>

            <li><a href="stories/Oscar Wild/The nightingale and the rose.doc">The nightingale and the rose</a></li>

            </ul>



        <li id="foldheader">Shakesrear</li>    

            <ul id="foldinglist" style="display:none" style=&{head};>    

            <li><a href="stories/Shakespear/King Lear.doc">King Lear</a></li>

            <li><a href="stories/Shakespear/Macbeth.doc">Macbeth</a></li>

            <li><a href="stories/Shakespear/Romeo and Juliet.doc">Romeo and Juliet</a></li>



            </ul>

    

</ul>
</ul>

<script language="JavaScript1.2">
<!--
/**
* Get cookie routine by Shelley Powers
* (shelley.powers@ne-dev.com)
*/
function get_cookie(Name) {
  var search = Name + "="
  var returnvalue = "";
  if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    // if cookie exists
    if (offset != -1) {
      offset += search.length
      // set index of beginning of value
      end = document.cookie.indexOf(";", offset);
      // set index of end of cookie value
      if (end == -1) end = document.cookie.length;
      returnvalue=unescape(document.cookie.substring(offset, end))
      }
   }
  return returnvalue;
}

if (get_cookie(window.location.pathname) != ''){
  var openresults=get_cookie(window.location.pathname).split(" ")
  for (i=0; i < openresults.length; i++){
    foldinglist[openresults[i]].style.display=''
    document.all[foldinglist[openresults[i]].sourceIndex -
1].style.listStyleImage="url(open.gif)"
  }
}

if (document.all){
  var nodelength=foldinglist.length-1
  var nodes=new Array(nodelength)
  var openones=''
}

function check(){
  for (i=0; i <= nodelength; i++){
    if (foldinglist[i].style.display=='')
       openones=openones + " " + i
  }
  document.cookie=window.location.pathname+"="+openones
}

if (document.all)
  document.body.onunload=check
//-->
</script>




Ну вот, как то так, у меня вот этот используется, разобраться вроде не сложно, этот скрипт я с сайта с этого брал. Это уже рабочий, то есть тебе лишь отредактить и свои надписи вставить

Вот, как он реальизован у меня: http://engteacher.ru/library.html

Русская версия Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)