0

I am unable to get it working. Can someone put me in the right direction?

When we click on any item in the tabbed header (SEO, Social Media Marketing, Search Engine Marketing, Content Marketing, Site Design), its respective content will be visible in the below area (tab pane). This is fine on Desktop and Tablet view but not good on Mobile view.

On Mobile view, all of the tabbed header items are stacked and the content (tab pane) is placed at the end of the content area. If we click on any of the tabbed header item, its content will be visible at the end not under the respective tabbed header item. I want to show it just below the tabbed header item.

http://www.bootply.com/ldg3QyNsw4

Kashif Rafique
  • 1,273
  • 1
  • 12
  • 25
  • 1
    Probably the easiest way is to use this plugin: https://github.com/flatlogic/bootstrap-tabcollapse. The demo shows exactly what you want: http://tabcollapse.okendoken.com/example/example.html – jme11 Oct 13 '14 at 16:18
  • http://stackoverflow.com/questions/25855428/make-bootstrap-3-tabs-responsive – Christina Oct 13 '14 at 17:21
  • Thanks for the response. I've tried on local server, but no success. How update bootply code to include bootstrap-tabcollapse dependency file? – Kashif Rafique Oct 13 '14 at 19:03
  • 1
    Lucky I saw this again, you need to specify the user @someone if you want them to see your response. Your implementation of the tabs is unique so the tab-collapse plugin won't work without re-writing the script or re-writing your tab set up the same markup and structure as the examples on Bootstrap's website. If you're in a pinch hide the tabs you created at the breakpoint and create a collapse that shows then hide the collapse when the other shows. – Christina Oct 13 '14 at 21:36
  • Thanks for the pointer @Christina. Created another section for mobile view that is hidden to other views. This section helped me to get it done: http://getbootstrap.com/javascript/#collapse – Kashif Rafique Oct 15 '14 at 10:05

0 Answers0