asked on

create tabbable content from this code using jQuery

Hi

I've got this code to work with and I need to make it jquery enabled tabs

I cannot amend this code as it comes from a 3rd party web service so im hoping one of you guru's can make it tabbable, my attempts fail miserable and it all shows, then all disappears each time :(

Tab names and tab content will obviously change but the other naming conventions will always be the same

Thanks
Neil

<div id="content">

  <ul class="nav nav-tabs" id="details_tabs" data-tabs="details_tabs">
    <li class="active"><a href="#details_tab_1" data-toggle="tab">My details</a></li>
    <li><a href="#details_tab_2" data-toggle="tab">Availability</a></li>
    <li><a href="#details_tab_3" data-toggle="tab">Likes</a></li>
  </ul>
  
  <div class="tab-content" id="details_tabs_content">  
    <div class="tab-pane active" id="details_tab_1"> content for tab 1</div>
    <div class="tab-pane" id="details_tab_2"> content for tab 2</div>
    <div class="tab-pane" id="details_tab_3">content for tab 3</div>
  </div>
  
</div>

Open in new window

lenamtl

Hi,

Not sure what you are looking for could you elaborate

Let say you use Jquery UI there are some example on the page https://jqueryui.com/tabs/
select an example and click on view source

if you use
Bootstrap 4 https://getbootstrap.com/docs/4.0/components/navs/#tabs

Bootstrap 3 https://getbootstrap.com/docs/3.3/javascript/#tabs

ASKER CERTIFIED SOLUTION

Zakaria Acharki

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Neil Thompson

ASKER

many thanks. I’ve only ever used jquery tabs so was trying to get that working with the supplied code.

I’ll import the bootstrap stuff and hopefully it won’t interfere with the rest of the site :)