jquery accordion html code

У меня есть этот скрипт js, но я понятия не имею, как полностью записать его в html-документе, чтобы он отображался, как и предполагалось. есть аспект html, аспект javascript, аспект jquery и часть css. это просто смущает меня. может ли кто-нибудь помочь?jquery accordion html code

http://jsfiddle.net/DkHyd/

<h1>Toggle Panels</h1> 
<div id="notaccordion"> 
    <h3><a href="#">Section 1</a></h3> 
    <div> 
    <p> 
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer 
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit 
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut 
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. 
    </p> 
    </div> 
    <h3><a href="#">Section 2</a></h3> 
    <div> 
    <p> 
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet 
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor 
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In 
    suscipit faucibus urna. 
    </p> 
    </div> 
    <h3><a href="#">Section 3</a></h3> 
    <div> 
    <p> 
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. 
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero 
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis 
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. 
    </p> 
    <ul> 
     <li>List item one</li> 
     <li>List item two</li> 
     <li>List item three</li> 
    </ul> 
    </div> 
    <h3><a href="#">Section 4</a></h3> 
    <div> 
    <p> 
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus 
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in 
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia 
    mauris vel est. 
    </p> 
    <p> 
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. 
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
    inceptos himenaeos. 
    </p> 
    </div> 
</div>

благодаря

источник

2013-08-12 user2469006

Сложив все вместе ... Вы получите этот

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script type="text/javascript" language="javascript"> 
    $(window).load(function() { 
     $.fn.togglepanels = function(){ 
      return this.each(function(){ 
      $(this).addClass("ui-accordion ui-accordion-icons ui-widget ui-helper-reset") 
      .find("h3") 
      .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom") 
      .hover(function() { $(this).toggleClass("ui-state-hover"); }) 
      .prepend('<span class="ui-icon ui-icon-triangle-1-e"></span>') 
      .click(function() { 
       $(this) 
       .toggleClass("ui-accordion-header-active ui-state-active ui-state-default ui-corner-bottom") 
       .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end() 
       .next().slideToggle(); 
       return false; 
      }) 
      .next() 
       .addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom") 
       .hide(); 
      }); 
     }; 

     $("#notaccordion").togglepanels(); 
    }); 
    </script> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"></link> 
</head> 

<body> 
    <h1>Toggle Panels</h1> 
    <div id="notaccordion"> 
     <h3><a href="#">Section 1</a></h3> 
     <div> 
     <p> 
     Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer 
     ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit 
     amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut 
     odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. 
     </p> 
     </div> 
     <h3><a href="#">Section 2</a></h3> 
     <div> 
     <p> 
     Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet 
     purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor 
     velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In 
     suscipit faucibus urna. 
     </p> 
     </div> 
     <h3><a href="#">Section 3</a></h3> 
     <div> 
     <p> 
     Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. 
     Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero 
     ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis 
     lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. 
     </p> 
     <ul> 
      <li>List item one</li> 
      <li>List item two</li> 
      <li>List item three</li> 
     </ul> 
     </div> 
     <h3><a href="#">Section 4</a></h3> 
     <div> 
     <p> 
     Cras dictum. Pellentesque habitant morbi tristique senectus et netus 
     et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in 
     faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia 
     mauris vel est. 
     </p> 
     <p> 
     Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. 
     Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
     inceptos himenaeos. 
     </p> 
     </div> 
    </div>                              
</body> 
</html>

Просто вставьте приведенный выше код в блокнот и сохраните его как index.html .. Вы в значительной степени готовы.

Наслаждайтесь

источник

2013-08-12 04:28:05 Thanos

swag ........... – user2469006

Там ID нет необходимости беспокоиться о коде JQuery у вас есть.

Здесь аккордеон очень упрощен с использованием jQuery UI Accordion.

$('#notaccordion').accordion(); //This is enough to play with jQuery accordion

Ссылка следует добавить:

JQuery UI CSS:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>

jquery.js:

<script src="http://code.jquery.com/jquery-1.9.1.js"/>

jQueryUI.js:

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"/>

Перейти через эту JSFiddle

Offline должен выглядеть

<html> 
<head> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/> 
<script src="http://code.jquery.com/jquery-1.9.1.js"/> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"/> 
<script> 
$('#notaccordion').accordion(); 
</script> 
</head> 
<body> 
<!-- Place your HTML Code--> 
</body> 
</html>

источник

2013-08-12 04:20:09 Praveen

вы просто положить JS в .js файл и сохранить его в проекте. После этого вы просто включите его в свой .html-файл. Если предположить, что ваш файл .js в/папку в расслоение плотной корневой папке проекта, вы должны включить его, как это между и:

<script src="./js/file.js"></script>

После этого, вы должны быть хорошо работать с ним. В том числе css тоже прямолинейно. Просто сделайте это, как это, предполагаюсь, что ваш файл .css находится в папке/CSS в корневом каталоге вашего проекта:

<link href="./css/file.css" rel="stylesheet">

Надеется, что я мог бы помочь.

источник

2013-08-12 04:22:10 Basti909851

jquery accordion html code

ответ

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