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 & Cash Only<br>Order More Than 10 Items Get Free Deliver…</p> <div id="bizAnnounDesc_more" class="pseudoLink">More »</div> <div id="bizAnnounDesc_less" class="pseudoLink" style="display: none;">« Hide</div> </div> <div id="anncBtm"> </div>
I might be missing the closing </div> tag, but you get the idea.
new Yelp.biz_announce('bizAnnounDesc', "wYRuMXPm0eQCFAtqC77qtw", "Served from 11:30 am to 2:15 pm, mon ~ fri<br>Tax Included & Cash Only<br>Order More Than 10 Items Get Free Deliver<br> *Gift certificate 10% OFF");
so could i use the collapsible panel, and put the tab on the bottom? or is there a better way to do it?
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.