3 Replies Latest reply on Oct 28, 2010 3:51 PM by Zabeth69-YATPtk

    Expand box on button click

    jattgolfer Level 1

      I'm not too sure what its called or what it is referred as, but how would I set up a box with a button that says "more" and when somebody clicks it, the box expands to show more information.

       

      Such as the one here:

       

      http://www.yelp.com/biz/mandarin-gourmet-palo-alto

       

      It's at the top titled "Special Lunch Box."

       

      Thanks

        • 1. Re: Expand box on button click
          Zabeth69-YATPtk Level 4

          What you see looks like a "disclosure widget," in this case a collapsible panel that has a "control" below the panel (typical simple collapsible panel controls are the panel 'bar'. By carefully aligning the borders, it looks like the box itself is expanding when you activate the widget.

           

          I have not located the css file that they used here, and it might actually be simpler than a disclosure widget...it might be all in the css.

           

          Here is the section of which you speak:

          <div id="bizAnnouncement">

                         <div id="anncInner" class="clearfix">

                              <div class="announcement_type SPECIAL_OFFER ieSucks"><strong>Special Lunch Box Only $6.00</strong></div>

                              <p id="bizAnnounDesc">Served from 11:30 am to 2:15 pm, mon ~ fri<br>Tax Included &amp; Cash Only<br>Order More Than 10 Items Get Free Deliver&#8230;</p>

                                   <div id="bizAnnounDesc_more" class="pseudoLink">More &raquo;</div>

                                   <div id="bizAnnounDesc_less" class="pseudoLink" style="display: none;">&laquo; Hide</div>

                         </div>

                         <div id="anncBtm"> </div>

          I might be missing the closing </div> tag, but you get the idea.

           

          Okay, the rest of the 'hidden' announcement is in javascript (they still left the 'y' off delivery):

           

                                   new Yelp.biz_announce('bizAnnounDesc', "wYRuMXPm0eQCFAtqC77qtw", "Served from 11:30 am to 2:15 pm, mon ~ fri<br>Tax Included &amp; Cash Only<br>Order More Than 10 Items Get Free Deliver<br> *Gift certificate 10% OFF");

          Not sure which javascript file this comes from; perhaps someone with javascript chops can chime in...

           

          Beth

          • 2. Re: Expand box on button click
            calijatt4lyfe Level 1

            so could i use the collapsible panel, and put the tab on the bottom? or is there a better way to do it?

            • 3. Re: Expand box on button click
              Zabeth69-YATPtk Level 4

              Sure. My recommendation is that you play around with collapsible panels.

               

              Look most of the way down this page: http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/collapsible_panel_sample. htm# and you will see links that open and close the panel.

               

              Keep in mind that you can do a great deal to style the panels and tabs; they don't even have to look like panels and tabs.

               

              Beth