13 Replies Latest reply on May 18, 2014 11:54 PM by Supreet1028

    jqueryui accordion help

    cr8on

      How do i add a jqueryui accordion and customize the text?

        • 1. Re: jqueryui accordion help
          resdesign Adobe Community Professional & MVP

          You can use this method below or yepnope for load the scripts.

          This was for a history course where I loaded the text of the Vedas in an accordion style.

          $("<link/>",{"rel":"stylesheet","type":"text/css","href":"css/jquery-ui-1.9.1.custom.min.c ss"}).appendTo("#Stage");

            $.getScript("js/jquery-ui-1.9.1.custom.min.js", function() {

                    var myAccordion = sym.$("myAccordion");

                    myAccordion.html("<h3>1. <i>Rigveda</i> - believed to be completed c. 1500 BC</h3>"

                    +"<ul><li>• Oldest known texts called <i>Rigveda</i></li><li>• Collection of sacred hymns (mantras) organized in 10 books</li><li>• Over 1,000 mantras written over hundreds of years</li><li>• Written in Sanskrit, earliest known form of India’s classical language</li><li>• Text is similar to earliest known language of Iran</li></ul>"

                    +"<h3>2. <i>Mantra</i> Texts – dated c. 1200 BC</h3>"

                    +"<ul><li>• Prose writings (everyday speech)</li><li>• First mention of iron (black metal) being used</li><li>• Written during the Kingdom of Kurus</li></ul>"

                    +"<h3>3. <i>Samhita</i> Prose – dated c. 1100–600 BC</h3>"

                    +"<ul><li>• Yajurveda began – writings on \"sacrificial knowledge\"</li><li>• Sacrificial knowledge was information and instructions on the performance of rituals and sacrifices</li><li>• Written during the change or shift in the center of Vedic Civilization</li></ul>"

                    +"<h3>4. <i>Brahmana</i> Prose – oldest text dated c. 800 BC</h3>"

                    +"<ul><li>• Explained in detail the meaning and purposes of rituals</li><li>• <i>Upanishads</i> were written over a period of several hundred years</li></ul>"

                    +"<h3>5. Sutra Language – dated c. 500 BC</h3>"

                    +"<ul><li>• Term refers to tying things together</li><li>• Discusses existence of evil and how to live a blissful life</li><li>• The third great and last urban center of Vedic Civilization is established</p>");

             myAccordion.accordion({ collapsible: true });

             myAccordion.accordion({animated:'bounceslide'});

             myAccordion.accordion({heightStyle: 'content'}); 

             myAccordion.accordion({ icons: { "header": "ui-icon-circle-plus", "headerSelected": "ui-icon-circle-minus" } });

           

           

          });

          1 person found this helpful
          • 2. Re: jqueryui accordion help
            resdesign Adobe Community Professional & MVP

            Here is the sample file simplified for here:

            https://www.box.com/s/2qto97640kpxkj4a06gp

            1 person found this helpful
            • 3. Re: jqueryui accordion help
              cr8on Level 1

              Amazing. It actually needs to open from left to right instead of up and down. Can that be done?

              • 4. Re: jqueryui accordion help
                resdesign Adobe Community Professional & MVP

                Let me check the documentation.

                • 5. Re: jqueryui accordion help
                  resdesign Adobe Community Professional & MVP

                  Why reinvent the wheel - here is another one you could use instead.

                  http://www.armagost.com/zaccordion/

                   

                  Check the documentation and the examples. You should be able to adapt it for Animation in the same fashion the other one what done.

                   

                  Hope this helps.

                  • 6. Re: jqueryui accordion help
                    cr8on Level 1

                    no luck getting the zAccordion to work.. Adapting has proven slightly confussing. Have you used zAccordion with edge before? I can do these things in dreamweaver, but placing the right things in the right places in edge is a challenge at times. after importing the javascript can i simply use $("myContainer").zAccordion( function calls)?

                    • 7. Re: jqueryui accordion help
                      cr8on Level 1

                      var slider = sym.$("accordion"),

                       

                       

                      yepnope({

                       

                       

                                both:[

                                                    "js/jquery.zaccordion.min.js"

                                                    "css/myCss.css"

                                ],

                                callback: function() {

                                                    ('#slider').zAccordion(){

                                                              tabWidth: 100,

                                                              speed: 650,

                                                              slideClass: 'slider',

                                                              animationStart: function () {

                                                              $('#slider').find('li.slider-open div').css('display', 'none');

                                                              $('#slider').find('li.slider-previous div').css('display', 'none');

                                                              },

                                                              animationComplete: function () {

                                                              $('#slider').find('li div').fadeIn(600);

                                                              },

                                                              width: 900,

                                                              height: 400

                                                    }

                                }

                       

                       

                      }):

                       

                       

                                slider.html('<ul id="slider">

                                <li>

                                          <img src="images/KIN_Launcg-2010.jpg" alt="" />

                                          <div>

                                                    <strong>City View</strong>

                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor lacus sollicitudin ligula sagittis.</p>

                                          </div>

                                </li>

                                <li>

                                          <img src="images/KIN_Launch2-2010.jpg" alt="" />

                                          <div>

                                                    <strong>Knock Knock!</strong>

                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in condimentum sem.</p>

                                          </div>

                                </li>

                                <li>

                                          <img src="images/KIN_Launch3-2010.jpg" alt="" />

                                          <div>

                                                    <strong>Cigars on Sale</strong>

                                                    <p>Duis viverra velit orci. Sed vestibulum mi nec est imperdiet sed ullamcorper augue molestie.</p>

                                          </div>

                                </li>

                                <li>

                                          <img src="images/LDV_Venetian_SmPoster_v5 copy.jpg" alt="" />

                                          <div>

                                                    <strong>On the Balcony</strong>

                                                    <p>Phasellus sed lectus nisl, eget cursus eros. Suspendisse posuere orci eu lorem luctus.</p>

                                          </div>

                                </li>

                      </ul>');

                      • 8. Re: jqueryui accordion help
                        resdesign Adobe Community Professional & MVP

                        No I have not use this one. I used the one from jqueryUI but it is only available in vertical and I think you need horizontal and this is why I proposed that one.

                        I will look into it this weekend unless you have it working already.

                        • 9. Re: jqueryui accordion help
                          cr8on Level 1

                          I have not figured it out yet. Any help would be greatly appreciated.

                          • 10. Re: jqueryui accordion help
                            resdesign Adobe Community Professional & MVP

                            I'll check it out tonight.

                            • 11. Re: jqueryui accordion help
                              cr8on Level 1

                              Thank you.

                              • 12. Re: jqueryui accordion help
                                resdesign Adobe Community Professional & MVP

                                I got the  liteaccordion pluggin to work.

                                Check the sample:

                                https://www.box.com/s/3c4dm84nj8wvmt66sila

                                I am not sure why the images are not loading. I will look into it.

                                 

                                Pluggin is here:

                                http://nicolahibbert.com/liteaccordion-v2/

                                 

                                Should work the same with z-accordion.

                                • 13. Re: jqueryui accordion help
                                  Supreet1028

                                  OMG! I love you! I downloaded the tril for Edge thinking it would be easy to create animated sites. But It's difficult!!!! I worked sleepless nights trying to figure to how to make this. I gave up and started searching again. I found your file! Thank you so so so much!  God Bless!