Search the Community

Hi, I'm currently stuck as two how I can do this, I have a desktop and mobile design where on Desktop the design acts like tabs but on mobile it acts as an Accordion. But i'm not too sure how the best way to go about this is. Please see attached the designs. Any examples or advice on how to do this would be greatly appreciated.

In my main navigation bar there is a menu named category & item and it has two submenus which names are category and item respectively. I have only one page to display these two section. My page is category_item.php and it has two different tabs to display each sections. In this case it iscategory and item. So my problem is I need to open category and item tab when clicking on category and item links on the submenu. This is code from main navigation bar <li class="current"> <a>Category & Item</a> <div class="menu-container"> <div class="menu-link"> <a href="">Category</a> </div> <div class="menu-link current"> <a href="">Item</a> </div> </div> </li> This is from category_item.php page <div class="ui-widget-header ui-corner-top"> <ul> <li><a href="#tabs-1">My Category</a></li> <li><a href="#tabs-2">My Items</a></li> </ul> </div> <div id="tabs-1" class="tabs3"> my stuff... </div> <div id="tabs-21" class="tabs3"> my stuff... </div> Can I know is it possible to do? Thank you.

I have a sidebar on a page, this will contain facebook and twitter feeds, however if I put jquery tabs on the page outside of the sidebar, the tab content only shows after the height of the sidebar HTML <div id="sidebar1"> <h3>Sidebar1 Content</h3> <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p> <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p> <!-- end #sidebar1 --><!--</div> --> <div id="mainContent"><!-- InstanceBeginEditable name="main-content" --> <h1>Charges</h1> <div id="tabs"> <ul> <li><a href="#tabs-1">Details</a></li> <li><a href="#tabs-2">Feedback</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> <div id="tabs-2"> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> </div> </div> sidebar css .twoColFixRtHdr #sidebar1 { float: right; /* since this element is floated, a width must be given */ width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */ padding: 15px 10px; } any ideas why?