Issue with 2 CEWPs on Same Page Using Tabs

Hi

We have two Content Editor Web Parts on the same page and both are using the Tabs code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>
</head>
<body>
 
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Test1</p>
  </div>
  <div id="tabs-2">
    <p>Test2</p>
  </div>
  <div id="tabs-3">
    <p>Test3</p>
  </div>
</div>
 
 
</body>
</html>

The tabs work on the first CEWP but you cannot change tabs on the second CEWP.  I've taken the CEWP and code and put it on other pages where there is no other CEWP using tabs and it works fine there, but not on the same page as another CEWP using tabs.

Any help would be appreciated.

Thanks

March 17th, 2015 10:25am

If you are adding the exact same code you provided above on the same page, then you will need to change the id of one of the wrapper divs.

Such as:

  <script>
  $(function() {
    $( "#tabs" ).tabs();
    $( "#tabs2" ).tabs();
  });
  </script>
</head>
<body>
 
<div id="tabs">
...
</div>

<div id="tabs2">
...
</div>

Free Windows Admin Tool Kit Click here and download it now
March 17th, 2015 8:38pm

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics