Current Issues:
1-By Default the First Main Tab with data-tab="1" and First Sub Tab with the data-tab="1" and the Inputs related to First Sub Tab with the data-tab="1" are active thats good to go.
But when click on other sub-tab with data-tab="1" it does not remove the active-sub-tab class from all the tabs and add to clicked one. Which keeps adding the active-sub-tab on all the tabs thats the huge issue.
2- If I click on other main tabs it by default shows the first sub tab as active but does not show its respective inputs
My part of HTML structure
<div id="main-tabs">
<button class="tab active" onclick="showTab('book')" data-tab="1">
Book
</button>
<button class="tab" onclick="showTab('book-section')" data-tab="2">
Book Section
</button>
<button class="tab" onclick="showTab('journal')" data-tab="3">
Journal
</button>
<button class="tab" onclick="showTab('periodical')" data-tab="4">
Periodical
</button>
<button class="tab" onclick="showTab('website')" data-tab="5">
Website
</button>
</div>
<div id="book" class="sub-tabs">
<div class="sub-tabs-wrapper">
<button class="sub-tab" onclick="showCitationStyle('apa-book')" data-tab="1"><span>APA</span><span>(Sixth Edition)</span></button>
<button class="sub-tab" onclick="showCitationStyle('chicago-book')" data-tab="1"><span>Chicago</span><span>(Sixteenth Edition)</span></button>
<button class="sub-tab" onclick="showCitationStyle('harvard-book')" data-tab="1"><span>Harvard</span><span>Anglia (2008)</span></button>
<button class="sub-tab" onclick="showCitationStyle('ieee-book')" data-tab="1"><span>IEEE</span><span>(2006)</span></button>
<button class="sub-tab" onclick="showCitationStyle('mla-book')" data-tab="1"><span>MLA</span><span>(Seventh Edition)</span></button>
<button class="sub-tab" onclick="showCitationStyle('turabian-book')" data-tab="1"><span>Turabian</span><span>(Sixth Edition)</span></button>
</div>
</div>
<div id="book-section" class="sub-tabs">
<div class="sub-tabs-wrapper">
<!-- 6 buttons with class sub-tab, same onclickCitationStyle() by replacing book with bookSection data-tab="2" -->
</div>
</div>
<div id="journal" class="sub-tabs">
<div class="sub-tabs-wrapper">
<!-- 6 buttons with class sub-tab, same onclickCitationStyle() by replacing book with journal data-tab="3" -->
</div>
</div>
<div id="periodical" class="sub-tabs">
<div class="sub-tabs-wrapper">
<!-- 6 buttons with class sub-tab, same onclickCitationStyle() by replacing book with periodical data-tab="4" -->
</div>
</div>
<div id="website" class="sub-tabs">
<!-- 6 buttons with class sub-tab, same onclickCitationStyle() by replacing book with website data-tab="5" -->
</div>
<!-- Inputs for Book Main tab -> sub-tabs -->
<div class="book-input-wrapper">
<div id="apa-book" class="citation-style">
<div class="cite-wrapper">
<div class="input-wrapper">
<!-- all the inputs for Book main tab sub-tab APA its generate button and output div -->
</div>
</div>
</div>
<div id="chicago-book" class="citation-style">
<div class="cite-wrapper">
<div class="input-wrapper">
<!-- all the inputs for Book main tab sub-tab chicago its generate button and output div -->
</div>
</div>
</div>
<div id="harvard-book" class="citation-style">
<div class="cite-wrapper">
<div class="input-wrapper">
<!-- all the inputs for Book main tab sub-tab harvard its generate button and output div -->
</div>
</div>
</div>
<div id="ieee-book" class="citation-style">
<div class="cite-wrapper">
<div class="input-wrapper">
<!-- all the inputs for Book main tab sub-tab ieee its generate button and output div -->
</div>
</div>
</div>
<div id="mla-book" class="citation-style">
<div class="cite-wrapper">
<div class="input-wrapper">
<!-- all the inputs for Book main tab sub-tab mla its generate button and output div -->
</div>
</div>
</div>
<div id="turabian-book" class="citation-style">
<div class="cite-wrapper">
<div class="input-wrapper">
<!-- all the inputs for Book main tab sub-tab turabian its generate button and output div -->
</div>
</div>
</div>
</div>
<!-- Inputs for Book Section Main tab -> sub-tabs -->
<div class="bookSection-input-wrapper">
<!-- follow same structure as Inputs for Book Main tab -> sub-tabs just changed the ids by replacing -book from id to -bookSection -->
</div>
<!-- Inputs for Journal Main tab -> sub-tabs -->
<div class="journal-input-wrapper">
<!-- follow same structure as Inputs for Book Main tab -> sub-tabs just changed the ids by replacing -book from id to -jouranl -->
</div>
<!-- Inputs for Journal Main tab -> sub-tabs -->
<div class="periodical-input-wrapper">
<!-- follow same structure as Inputs for Book Main tab -> sub-tabs just changed the ids by replacing -book from id to -periodical -->
</div>
<!-- Inputs for Website Main tab -> sub-tabs -->
<div class="website-input-wrapper">
<!-- follow same structure as Inputs for Book Main tab -> sub-tabs just changed the ids by replacing -book from id to -website -->
</div>
My part of JavaScript that have issues:
//Function to show the sub-tabs for a given main tab
function showTab(tabId) {
// Hide all sub-tabs
var subTabs = document.getElementsByClassName("sub-tabs");
for (var i = 0; i < subTabs.length; i++) {
subTabs[i].style.display = "none";
}
// Show the sub-tabs for the selected main tab
document.getElementById(tabId).style.display = "block";
}
// Function to show the citation style inputs for a given citation style
function showCitationStyle(citationStyle) {
// Hide all citation style inputs
var citationStyles = document.getElementsByClassName("citation-style");
for (var i = 0; i < citationStyles.length; i++) {
citationStyles[i].style.display = "none";
}
// Show the citation style inputs for the selected citation style
document.getElementById(citationStyle).style.display = "block";
}
// Get all the main tabs
var tabs = document.querySelectorAll('.tab');
// Add the active class to the first tab
tabs[0].classList.add('active-tab');
for (var i = 0; i < tabs.length; i++) {
tabs[i].addEventListener("click", function() {
// Remove the active class from all tabs
for (var j = 0; j < tabs.length; j++) {
tabs[j].classList.remove("active-tab");
}
// Add the active class to the clicked tab
this.classList.add("active-tab");
});
}
// Get all the sub-tabs
var subTabs = document.querySelectorAll('.sub-tab');
// Add the active class to the first sub-tab
subTabs[0].classList.add('active-sub-tab');
for (var i = 0; i < subTabs.length; i++) {
subTabs[i].addEventListener("click", function() {
// Remove the active class from all sub-tabs
for (var j = 0; j < subTabs.length; j++) {
subTabs[j].classList.remove("active-sub-tab");
}
// Add the active class to the clicked sub-tab
this.classList.add("active-sub-tab");
});
}
Desired Output:
I want smooth tab functionality for Main Tab their sub tabs and respective inputs: in tabs and sub tabs I used data-tab for 5 main tabs. For each main tab there are 6 sub tabs defining which sub tabs are for which main tab by mentioning the same data-tab attribute in sub tabs
1- On Page Load - First Main Tab with data-tab="1" and its First sub-tab with data-tab="1" and its respective input should be active.
2- On click on other sub-tabs with data-tab="1" it should first remove the active-sub-tab class from all the sub-tab with data-tab="1" and add active-sub-tab class to clicked sub-tab with data-tab="1" and on every click on any sub-tab with data-tab="1" should display its respective inputs.
3- On Click on other main tab it should follow the same functionality with their respective data-tab attributes, sub-tab and respective inputs.
Related
I'm trying to scrape some files off of a website which has files organized like this:
<div id="CourseContent">
<div class="tab-content coursecontentnotes" id="content_210485ac8-16e8-11ed-9075-0a45a3083c9c">
<!-- Text Content -->
<!-- End Text Content -->
<!-- Video Content -->
<!-- Video Content End -->
<!-- File Content Start -->
<div class="content-type-area">
<div class="row">
<div class="col-md-12">
<div href="javascript:void(0)" class="link-preview" onclick="downloadcoursedoc('4d2d6bd0-077a-4bda-80be-cf7483c9f606')">
<span class="pesu-icon-unlink" aria-hidden="true"></span>
Web Form 2.0 & Form Controls
<span class="pesu-icon-arr-right pull-right" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
<!-- File Content End -->
<!-- Web Link Content End -->
<!-- Web Link Content End -->
<!-- Text Content -->
<!-- End Text Content -->
<!-- Video Content -->
<!-- Video Content End -->
<!-- File Content Start -->
<div class="content-type-area">
<div class="row">
<div class="col-md-12">
<div href="javascript:void(0)" class="link-preview" onclick="downloadcoursedoc('a7bdfc1e-d7cd-40ac-9b02-a688fc684e6e')">
<span class="pesu-icon-unlink" aria-hidden="true"></span>
HTML5 (New Tags, Inputs, Elements and Controls),
<span class="pesu-icon-arr-right pull-right" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
<!-- File Content End -->
<!-- Web Link Content End -->
<!-- Web Link Content End -->
<!-- END of for loop -->
<!-- For Study Material -->
<!-- End of Study Material -->
<!-- For Forums -->
<!-- For Forums End -->
</div>
The code I used in puppeteer's page.evaluate function is as follows:
let downloadObj = document.querySelectorAll(
"#CourseContent .tab-content .content-type-area div"
);
// filter selected elements belonging to same content row
downloadObj = Array.from(downloadObj).filter((el) =>
el.querySelector(".col-md-12")
);
downloadObj.forEach((ele) => {
eval(ele.querySelector(".link-preview").getAttribute("onclick"));
});
The problem is, only only the second file is getting downloaded.
But if I manually do
eval(downloadObj[0].querySelector(".link-preview").getAttribute("onclick"));
the file downloads normally.
Does this have to do something with the click opening a new tab?
Thank you for your time.
Try this instead - it gives each click a second
const elements = [...document.querySelectorAll("#CourseContent .tab-content .content-type-area div .col-md-12")]
.map(ele => ele.querySelector(".link-preview");
const length = elements.length;
let cnt = 0;
let tId;
const clickIt = () => {
if (cnt >= length) return; // stop
elements[cnt].click();
cnt++
setTimeout(clickIt,1000);
});
clickIt();
i have a problem with my website. I have couple of functions in java script that works in <body> <script> js code </script></body> but when i link external js file with exactly the same code functions that are called by onclick"function name" attribute stop working and I get error can't find variable: function name also it seems like it can't find some of ids for variables because i can't log them. this is my code
function onload() {
/* leaderboard variable */
let x = document.getElementById('boardw');
/* help popup variable*/
let y = document.getElementById('helpw');
/* settings popup variable*/
let z = document.getElementById('setw');
/* help button variable*/
let a = document.getElementById('help');
/* dropdown container variable*/
let dropdown = document.getElementById('dropdown');
/* footer popup display none*/
document.getElementById('card').style = "display: none;";
/* variable test */
console.log(x);
/* show footer popup */
function showCard() {
document.getElementById('card').style = "display: block;";
document.getElementById('footer').style = "display: none;";
}
/* hide footer popup */
function hide() {
document.getElementById('card').style = "display: none;";
document.getElementById('footer').style = "display: block;";
}
/* choose time in dropdown function */
function show(anything) {
document.getElementById('txt').value = anything;
}
/* show options in dropdown */
dropdown.onclick = function() {
dropdown.classList.toggle('active');
}
/* show leaderboard function*/
function menu1() {
x.classList.toggle('active');
}
/* show help popup function*/
function menu2() {
y.classList.toggle('active');
a.classList.toggle('active');
}
/* show settings function*/
function menu3() {
z.classList.toggle('active');
}
/* hide popups function*/
function remove() {
y.classList.remove('active');
z.classList.remove('active');
x.classList.remove('active');
dropdown.classList.remove('active');
}
}
<body id="bd" style="" onload="onload()">
<script src="script.js" charset="utf-8"></script>
<!-- dropdown select time window -->
<div class="dropdown" id="dropdown" onclick="">
<!-- dropdown textbox with chosen informations -->
<input type="text" class="textbox" id="txt" value="" placeholder=" select the test duration" readonly>
<!-- options for dropdown select -->
<div class="option">
<div onclick="show(' 1 minute')">1 minute</div>
<div onclick="show(' 2 minutes')">2 minutes</div>
<div onclick="show(' 3 minutes')">3 minutes</div>
<div onclick="show(' 5 minutes')">5 minutes</div>
<div onclick="show(' 10 minutes')">10 minutes</div>
</div>
</div>
<!-- checkboxes for charset in game -->
<div id="charset">
<!-- normal letters check -->
<div>
<label for="cka">a</label>
<input type="checkbox" id="cka" class="ck">
</div>
<!-- capital letters check -->
<div>
<label for="ckB">A</label>
<input type="checkbox" id="ckB" class="ck">
</div>
<!-- numbers check -->
<div>
<label for="ck1">1</label>
<input type="checkbox" id="ck1" class="ck">
</div>
<!-- special characters check -->
<div>
<label for="ck>">#</label>
<input type="checkbox" id="ck" class="ck">
</div>
</div>
<!-- about popup -->
<footer onclick="remove()">
<!-- show popup btn -->
<button id="footer" onclick="showCard();" style="">i</button>
<!-- popup container -->
<div id="card" class="card" style="">
<!-- close popup btn -->
<button id="close" onclick="hide()">x</button>
</div>
</footer>
<!-- menu -->
<menu>
<!-- leaderboard popup -->
<button class="menu" id="board" onclick="menu1()">L</button>
<div id="boardw" style="" class="menuw">
</div>
<!-- help popup -->
<button class="menu" id="help" onclick="menu2()">?</button>
<div id="helpw" style="" class="menuw">
</div>
<!-- settings pop -->
<button class="menu" id="settings" onclick="menu3()">S</button>
<div id="setw" style="" class="menuw">
</div>
</menu>
<!-- start game btn -->
<div id="gma">
<button id="start">Start</button>
</div>
<!-- frame for higher resolution screen-->
<div class="h"> </div>
</body>
You wrapped your functions in function onload() { ... } so the inner functions can't be reached from HTML.
Remove this wrapper.
Add defer attribute to the script
put functions and variables outside the onload function,
or use addEventListener to call listener
document.getElementById("cka").addEventListener("click", function(){
...
})
I have the below as an example of what I'm working on; I'm trying to add a class to two elements when one of the elements is clicked.
<div id="main">
<div id="section1">
- contents here -
</div>
<div id="section2">
- contents here -
</div>
<div id="section3">
- contents here -
</div>
<div class="plans-group">
<div class="plans-columns plans-type-1">
<div class="plans-col plans-left plans-heading">Heading</div>
<div class="plans-col plans-right">
<div class="select-plan select-gold">Gold</div>
</div>
<!-- end plans-right -->
</div>
<!-- end plans-columns -->
<div class="plans-columns plans-type-2">
<div class="plans-col plans-left plans-heading">Heading</div>
<div class="plans-col plans-right">
<div class="select-plan select-silver">Silver</div>
</div>
<!-- end plans-right -->
</div>
<!-- end plans-columns -->
<div class="plans-columns plans-type-3">
<div class="plans-col plans-left plans-heading">Heading</div>
<div class="plans-col plans-right">
<div class="select-plan select-bronze">Bronze</div>
</div>
<!-- end plans-right -->
</div>
<!-- end plans-columns -->
</div>
<!-- end plans-group -->
</div>
<!-- end main -->
#1): DIV with class "select-plan"
When div with class "select-plan" is clicked, add class "clicked" to that div. When it's clicked again, remove the added class.
#2): DIV with id "main"
When "select-plan" is clicked (as explained above) also add class to the container div with id "main". And remove the added class when "select-plan" is clicked again.
This is where I have a problem because different classes have to be added to "main". For example:
When "select-gold" is clicked, add class "gold-selected" to "main"
When "select-silver" is clicked, add class "silver-selected" to "main"
When "select-bronze" is clicked, add class "bronze-selected" to "main"
I don't want previously clicked div to have its added class removed because another div is clicked. The added class should only be removed when that same div is clicked for the second time and so on...
Also, I might have up to 8 or more plans. The solution should not be limited to the 3 plans (Gold, Silver, and Bronze). I should have the ability to create more plans.
I really appreciate everyone's help with this.
Thanks in advance.
let selectPlan = document.querySelectorAll('.select-plan');
let mainDiv = document.getElementById('main');
selectPlan.forEach(el =>{
el.addEventListener('click',function(e){
if(e.target.classList.contains('select-plan')){
e.target.classList.toggle('clicked');
}
if(e.target.classList.contains('select-gold')){
mainDiv.classList.add('gold-selected');
mainDiv.classList.remove('silver-selected');
mainDiv.classList.remove('bronze-selected');
}else if(e.target.classList.contains('select-silver')){
mainDiv.classList.add('silver-selected');
mainDiv.classList.remove('gold-selected');
mainDiv.classList.remove('bronze-selected');
}else{
mainDiv.classList.add('bronze-selected');
mainDiv.classList.remove('silver-selected');
mainDiv.classList.remove('gold-selected');
}
});
});
let main = document.getElementById("main");
let select = document.querySelector(".select-plan");
let selectG = document.getElementsByName("gold");
let selectS = document.getElementsByName("silver");
let selectB = document.getElementsByName("bronze");
function toggleGold() {
if (main.classList.contains('gold-select')) {
main.classList.remove('gold-select');
} else {
main.classList.add('gold-select');
}
selectG[0].classList.toggle('cliqué')
}
//You can add same function for silver and bronze
document.querySelector(".select-gold").addEventListener("click", toggleGold);
document.querySelector(".select-silver").addEventListener("click", toggleSilver);
document.querySelector(".select-bronze").addEventListener("click", toggleBronze)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div name="gold" class="select-plan select-gold">Gold</div>
<div name="silver" class="select-plan select-silver">Silver</div>
<div name="bronze" class="select-plan select-bronze">Bronze</div>
I am trying to develop a page where there would be multiple divs, each of these divs have a button of which would show a "dropdown" style div below it when clicked.
Currently I have some code which when one button is clicked, it shows all of the "dropdown" styled divs on the page instead of just the one in the same container as the button.
I would like this to be done in pure JavaScript without jquery, any help would be appreciated, thank you!
HTML
<div class="fullResultsContainer">
<div class="resultContainer">
<div class="resultRow">
<!-- This has multiple divs but this is the only one relevant to the issue-->
<div class="resultMenu">
<button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog()"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown">
<p> This is the content I want to show on button click</p>
</div>
</div>
<div class="resultContainer">
<div class="resultRow">
<!-- This has multiple divs but this is the only one relevant to the issue-->
<div class="resultMenu">
<button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog()"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown">
<p> This is the content I want to show on button click</p>
</div>
</div>
</div>
JS
function mobileActivityLog() {
var btn = document.getElementsByClassName("mobileShowActivityFeedBtn");
var activity = document.getElementsByClassName("mobileDropDown");
for(var i=0; i<btn.length; i++) {
for(var j=0; i<activity.length; j++) {
if(activity[j].style.display == "none") {
activity[j].style.display = "flex"
} else {
activity[j].style.display = "none"
}
}
}
}
I think the easiest way is to send a parameter to the method and getElementById with a concatenated string with the parameter.
<div class="fullResultsContainer">
<div class="resultContainer">
<div class="resultRow">
<div class="resultMenu">
<button onclick="mobileActivityLog(1)"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown-1">
<p> This is the content I want to show on button click</p>
</div>
</div>
<div class="resultContainer">
<div class="resultRow">
<div class="resultMenu">
<button onclick="mobileActivityLog(2)"> Show activity feed </button>
</div>
</div>
<div id="mobileDropDown-2">
<p> This is the content I want to show on button click</p>
</div>
</div>
</div>
JS
function mobileActivityLog(index) {
var activity = document.getElementsById("mobileDropDown-" + index);
if(activity.style.display == "none") {
activity.style.display = "flex"
} else {
activity.style.display = "none"
}
}
One of the best possible ways to achieve this is to pass the current context using 'call' in the HTML. Use this context to target the required result container(here 'mobileDropDown' container).
function mobileActivityLog () {
var _this = this;
var activity = _this.closest('.resultContainer').querySelector(".mobileDropDown");
activity.classList.toggle('hide');
}
.hide {
display: none;
}
<div class="fullResultsContainer">
<div class="resultContainer">
<div class="resultRow">
<!-- This has multiple divs but this is the only one relevant to the issue-->
<div class="resultMenu">
<button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog.call(this)"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown">
<p> This is the content I want to show on button click</p>
</div>
</div>
<div class="resultContainer">
<div class="resultRow">
<!-- This has multiple divs but this is the only one relevant to the issue-->
<div class="resultMenu">
<button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog.call(this)"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown">
<p> This is the content I want to show on button click</p>
</div>
</div>
</div>
Here my JSfiddle : http://jsfiddle.net/sgmkghf4/
I want to create multiple level tabs.
In the first tabs i want to add somme other tabs levels but the first level tabs close when i click on second levels tabs.
Where is the mistake ?
<!--TABS WRAPPER-->
<div class="tabs_wrapper">
<!-- 2nd new tab design START -->
<div id="new2_tabs">
<ul>
<li class="active">1</li>
<li><a class="icon" href="#finished" rel="finished">2</a></li>
<li>3</li>
</ul>
</div>
<div id="new2_tabs_content" style="padding:0">
<div id="pending" class="tab_content" style="display: block;">
<!--SECOND TABS-->
<div class="tabs_wrapper">
<!-- 2nd new tab design START -->
<div id="new2_tabs">
<ul>
<li class="active">1.1</li>
<li><a class="icon" href="#othertwo" rel="othertwo">1.2</a></li>
<li>1.3</li>
</ul>
</div>
<div id="new2_tabs_content" style="padding:0">
<div id="otherone" class="tab_content" style="display: block;">
<p>TEST1</p>
</div>
<div id="othertwo" class="tab_content">
<p>TEST2</p>
</div>
<div id="otherthree" class="tab_content">
<p>TEST3</p>
</div>
</div>
<!-- 2nd new tab design END -->
</div>
<!--SECOND TABS-->
</div>
<div id="finished" class="tab_content">
<p>TEST2</p>
</div>
<div id="cancelled" class="tab_content">
<p>TEST3</p>
</div>
</div>
<!-- 2nd new tab design END -->
</div>
$(document).ready(function(){
// Main function that shows and hides the requested tabs and their content
var set_tab = function(tab_container_id, tab_id){
// Remove class "active" from currently active tab
$('#' + tab_container_id + ' ul li').removeClass('active');
// Now add class "active" to the selected/clicked tab
$('#' + tab_container_id + ' a[rel="'+tab_id+'"]').parent().addClass("active");
// Hide contents for all the tabs.
// The '_content' part is merged with tab_container_id and the result
// is the content container ID.
// For example for the original tabs: tab_container_id + '_content' = original_tabs_content
$('#' + tab_container_id + '_content .tab_content').hide();
// Show the selected tab content
$('#' + tab_container_id + '_content #' + tab_id).fadeIn();
}
// Function that gets the hash from URL
var get_hash = function(){
if (window.location.hash) {
// Get the hash from URL
var url = window.location.hash;
// Remove the #
var current_hash = url.substring(1);
// Split the IDs with comma
var current_hashes = current_hash.split(",");
// Loop over the array and activate the tabs if more then one in URL hash
$.each(current_hashes, function(i, v){
set_tab($('a[rel="'+v+'"]').parent().parent().parent().attr('id'), v);
});
}
}
// Called when page is first loaded or refreshed
get_hash();
// Looks for changes in the URL hash
$(window).bind('hashchange', function() {
get_hash();
});
// Called when we click on the tab itself
$('.tabs_wrapper ul li').click(function() {
var tab_id = $(this).children('a').attr('rel');
// Update the hash in the url
window.location.hash = tab_id;
// Do nothing when tab is clicked
return false;
});
});
Can you help me ?
You have very messed markup, but the main reason why this doesn't work is that you're using same id for multiple elements (new2_tabs and new2_tabs_content).
First of all, change ids to unique values. Then add classes to elements which you want to style, like this:
...
<div id="new_tabs" class="tabs">
...
<div id="new_tabs_content" style="padding:0" class="tabs_content">
In your css rewrite rules to use classes instead of ids. Here is working demo