Как назначить тег привязки для расширения содержимого

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

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

Я бы хотел, чтобы ссылка «click more» была привязана к тегу, чтобы автоматически развернуть раздел при нажатии, но что-то, что также разрушает его, похожее на то, что у меня есть сейчас.

Вот это JS мне удалось стянуть

<script type="text/javascript"> 
    function toggle_visibility(tbid,lnkid) { 
     if (document.all) { 
      document.getElementById(tbid). style.display = document.getElementById(tbid).style.display == "block" ? "none" : "block"; 
     } 
     else { 
      document.getElementById(tbid).style.display = document.getElementById(tbid).style.display == "table" ? "none" : "table"; 
     } 

     document.getElementById(lnkid).value = document.getElementById(lnkid).value == "[-] Collapse" ? "[+] Expand" : "[-] Collapse"; 
    } 
</script> 

<style type="text/css"> 
    .hangingIndent { 
     text-indent: -24px; 
     padding-left: 24px; 
    } 
    #tbl1 {display:none;} 
    #lnk1 { 
     border:none; 
     background:none; 
     width:85px; 
    } 
</style>

А вот пример тела

<body style="background-color: #FFFFFF; margin: 20;"> 
    <p style="font-family: Calibri, sans-serif; font-size: 12pt; padding:0px 20px;" class="hangingIndent"> 
     <input type="checkbox"> 
      <strong>Item one</strong><br /> 
      <em>For more information about Item one <a href="#Item1">click here</a>!</em> 
    </p> 
    <br /> 

    <table width="800px" border="0" align="center" cellpadding="4" cellspacing="0"> 
     <tr height="1"> 
      <td bgcolor="#333333" colspan="3"></td> 
     </tr> 
     <tr bgcolor="#EEEEEE" height="15"> 
      <td> 
       <strong><a id="Item1">Item one</a></strong> 
      </td> 
      <td bgcolor="#EEEEEE" align="right"> 
       <input id="lnk1" type="button" value="[+] Expand" onclick="toggle_visibility('tbl1','lnk1');"> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="3"> 
       <table width="100%" border="0" cellpadding="4" cellspacing="0" id="tbl1"> 
        <tr> 
         <td colspan="3"> 
          <p style="font-family: Calibri, sans-serif; font-size: 12pt; padding:0px 20px;">Lots of extra information about Item one</p> 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
    <br /> 
</body>

Спасибо за вашу помощь!

источник

2014-01-27 Sarah

Посмотрите на JQuery, много такого рода вещи делается для вас. – ElendilTheTall

jquery может быть вашим лучшим маршрутом и, в частности, функцией slideToggle или показать и скрыть функции. Кроме того, есть взглянуть на JQuery UI аккордеона

A jquery accordion may be your best route

источник

2014-01-27 16:18:08 user466764

, чтобы скрыть элементы:

document.getElementById(idOfElement).style.display="none"

, чтобы показать им:

document.getElementById(idOfElement).style.display="block"

позволяет сделать функцию

function toggleElementDisplay(elementID){ 

    element = document.getElementById(elementID); 

    if(element.getPropertyValue("display") == "block"){ 
     element.style.display="none"; 
    } else { 
     element.style.display="block"; 
    } 

}

Чтобы использовать это сделать, как этот

<body> 
<div id="click" onClick="toggleElementDisplay('stuff');">Toggle</div> 
<div id="stuff">Hello</div> 
<script> 
function toggleElementDisplay(elementID) { 
    var element = document.getElementById(elementID), 
     style = window.getComputedStyle(element), 
     display = style.getPropertyValue("display"); 

    if (display == "block") { 
     element.style.display = "none"; 
    } else { 
     element.style.display = "block"; 
    } 

} 
</script> 
</body>

Вот это demo, чтобы помочь

источник

2014-01-27 16:24:39

Как назначить тег привязки для расширения содержимого

ответ

Смежные вопросы