6 Replies Latest reply on Dec 1, 2014 8:43 AM by resdesign

    Accordian widget is it possible?

    circlemover

      Hya

       

      I have a wish list. One item I dearly want.  And that is to have an Accordion widget on my site - which I am attempting to build entirely in EA.  I have searched this forum and can't even get a sniff of info about Accordion Widgets and Edge...so for my sins (which are extensive and totally reliable) I pose the question for all you code-heads just waiting to rise to a new challenge...and tell me IF it possible to load an accordion js script into edge and how do I go about the matter in easy manageable steps (I know I ask too much).  I have seen the  object of my desire on jQuery.com ... and in my dreams. 

        • 1. Re: Accordian widget is it possible?
          resdesign Adobe Community Professional & MVP

          Yes. Use yepnope to load and then follow normal directions like any other jquery-ui.

          • 2. Re: Accordian widget is it possible?
            circlemover Level 1

            thanx resdesign for your time...I have never used js script and am building my first website - its a new hobby. Started out using Muse and discovered Edge...never looked at Muse since...so there is a lot here that's completely new including loading via yepnope...but I am a quick learner.  l  have learned a great deal from reading your posts here!!

            • 3. Re: Accordian widget is it possible?
              resdesign Adobe Community Professional & MVP

              Thanks.

              Sample here: https://www.box.com/s/gaipshsyw8mq4k1d03t6

               

              Here is what you do:

              • load jquery-ui with yepnope or $getScript();
              • place the js file in a folder - called js for example
              • add you html code <h3> for title and what you need for the rest - you can add images as well

               

              I am not sure how you want to implement it but below is the code:

               

              $("<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() {

              // add the html to the text element on the stage

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

               

               

              myAccordion.html(

              "<H3>A title</H3>"

                        + "<ol><li>1. ordered list item 1</li><li>2. item 2</li><li>3. item 3</li></ol>"

                        + "<H3>another title</H3>"

                        + "<p align='center'>some text<br><img src='images/arrow.png' alt='arrow' ><br> some text here</p>"

               

                        );

              // these properties can be combined but I added 3 lines for you to see some of possible properties 

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

                myAccordion.accordion({ collapsible: true });

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

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

              });

              • 4. Re: Accordian widget is it possible?
                circlemover Level 1

                Truely thankful - I'll definately give this some serious thought, thanks this is a great help and a good starting point for me...a giant leap in fact!

                1 person found this helpful
                • 5. Re: Accordian widget is it possible?
                  s.vencil

                  Any possibility of posting your sample file again? If yes, I would be thrilled and so incredibly grateful! Thank you!

                  • 6. Re: Accordian widget is it possible?
                    resdesign Adobe Community Professional & MVP

                    This is a version with yepnope done a long time ago.

                    Accordion with yepnope.zip - Box

                    Just add jquery and jqueryUi in the script loading if you are using versions older than 3.1 and delete the yepnope lines in cmopositionReady.

                    Append jquery-UI css

                     

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