Спойлеры для вордпресса и опенкарта

Posted on by da

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

Ща его и проверим, ну-ка, пусть тут будет скрытый текст… 

оп-па! работает? 
или ни фига?

Ща его и проверим, ну-ка, пусть тут будет скрытый текст… текст

оп-па! работает? 
или ни фига?

 

Спойлеры для опенкарт

  1. <a class=»aspoiler» href=»javascript:fspoiler()»>Текст спойлера</a>
  2.  
  3.         <div id=»spoiler» style=»display:none»>
  4.  
  5.                 Текст появляющийся после нажатия на ссылку «Текст спойлера»
  6.  
  7.         </div>
  8.  
  9. <script type=»text/javascript»>
  10.  
  11. function fspoiler() {obj = document.getElementById(«spoiler»); if( obj.style.display == «none» ) { obj.style.display = «block»; } else { obj.style.display = «none»; }}
  12.  
  13. </script>

 

  1. <html><head>
  2.  <title>Spoiler HTML code</title>
  3.  <style type=»text/css»>
  4.  .onner {color: blue}
  5.  .spoiler {border:0px solid #ddd; padding:3px;}
  6. .spoiler .inner {border:0px solid #eee; padding:3px;margin:3px;}
  7. </style>
  8.  
  9.  <script type=»text/javascript»>
  10.  function showSpoiler(obj){var inner = obj.parentNode.getElementsByTagName(«div»)[0];if(inner.style.display ==»none») inner.style.display =»»;else inner.style.display =»none»;}
  11.  </script>
  12.  
  13.  </head>
  14.  <body>
  15.  
  16.  <div class=»spoiler»>
  17. <span class=»onner» onclick=»showSpoiler(this);»>Статья №1</span>
  18.  <div class=»inner» style=»display:none;»>Содержание Статьи</div></div>
  19.  
  20.  </body></html>

Хехе все оказалось просто и без изучения css надо всего то добавить style=»cursor:pointer» , В итоге чтобы был текст подчеркнуты и с курсором рука все будет выглядеть так. Проверил в IE и FF работает

<html><head>
<title>Spoiler HTML code</title>
<style type=»text/css»>
.onner {color: blue}
.spoiler {border:0px solid #ddd; padding:3px;}
.spoiler .inner {border:0px solid #eee; padding:3px;margin:3px;}
</style>
<script type=»text/javascript»>
function showSpoiler(obj) {var inner = obj.parentNode.getElementsByTagName(«div»)[0]; if (inner.style.display == «none») inner.style.display = «»; else inner.style.display = «none»; }
</script>
</head>
<body>
<div class=»spoiler»>
<span class=»onner» onclick=»showSpoiler(this);» style=»cursor:pointer»><u>Статья №1</u&gt;</span>
<div class=»inner» style=»display:none;»>Содержание Статьи</div></div>
</body></html>

 

Справедливости ради стоит отметить, что стиль ссылки, открывающей спойлер должен отличаться от ссылки, переводящей на другую страницу. Принято, чтобы подчеркивание такой ссылки было не сплошным, а пунктирным. Для этого в стилях нужно добавить что-то вроде этого:

 

Похожие посты:

Ночное Последствия ледяного дождя Москва стоЯщая