I am creating a list of frequently asked question with questions and explanations. By default i want to show questions only.
If a user clicks on a particular question, then only its answer should expand, closing all the other answers.
I'm using nested loops.
<html>
<head>
<title></title>
</head>
<script>
function display(k){
for(i=1;i<=k;i++){
for(j=i; j<=i; j++){
document.getElementById('sol'+j).style.display="block";
}
document.getElementById('sol'+i).style.display="none";
}
}
</script>
<body>
<div id="faq1" onclick="display(1)">FAQ 1: Return Policy
<div id="sol1" style="display: none;">
Customer can replace products within 30 days from the days of purchase.
</div>
</div>
<div id="faq2" onclick="display(2)">FAQ 2: Warranty
<div id="sol2" style="display: none;">
Warranty would be solely fulfiled by the brand company.
</div>
</div>
<div id="faq3" onclick="display(3)">FAQ 3: Extended Warranty
<div id="sol3" style="display: none;">
Customer can apply for extended warranty for their products provided their products fulfil the TOS.
</div>
</div>
<div id="faq4" onclick="display(4)">FAQ 4: Address
<div id="sol4" style="display: none;">
Our company is situated in the heart of the city Jammu.
</div>
</div>
</body>
</html>
i tried different combinations, but i'm stuck.
A much easier approach would be to add a CSS class for all the questions and for all the answers.
Then specify, for example let's use .answer, that the class elements are hidden (.answer {display: none}). Then, use JS to create an event listener for all the question class elements, and upon clicking just toggle it's child div (.answer).
That way you'd avoid many errors and bad design choices you have in your code, like: repeated ids, inline styles, separate onclick attributes for every question div, etc.
Add jquery and make it simple.
jsFiddle
<script type="text/javascript">
$(document).ready(function(){
$('.faq').click(function(){
if($(this).find('div:first-child').is(':visible'))
$(this).find('div:first-child').hide('slow');
else
{
$('.faq').children().hide('slow');
$(this).find('div:first-child').show('slow');
}
});
});
</script>
try using document.getElementsByClassName : see this DEMO
function display(k){
arr = document.getElementsByClassName('sol');
for(i=0; i<arr.length; i++){
arr[i].style.display="none";
}
document.getElementById('sol'+k).style.display="block";
}
css:
.sol{
display: none;
}
and add class sol to divs:
<div id="sol1" class="sol">
Customer can replace products within 30 days from the days of purchase.
</div>
HTML is here
<div id="faq1" class="faqcls">FAQ 1: Return Policy
<div id="sol1" class="solcls" style="display: none;">
Customer can replace products within 30 days from the days of purchase.
</div>
</div>
<div id="faq2" class="faqcls" >FAQ 2: Warranty
<div id="sol2" class="solcls" style="display: none;">
Warranty would be solely fulfiled by the brand company.
</div>
</div>
<div id="faq3" class="solcls" class="faqcls">FAQ 3: Extended Warranty
<div id="sol3" style="display: none;">
Customer can apply for extended warranty for their products provided their products fulfil the TOS.
</div>
</div>
<div id="faq4" class="solcls" class="faqcls">FAQ 4: Address
<div id="sol4" style="display: none;">
Our company is situated in the heart of the city Jammu.
</div>
</div>
and javascript is here
$(document).on('click','.faqcls',function() {
$(this).find('.solcls').slideToggle();
});
and jsfiddle is http://jsfiddle.net/A3Pwg/
Related
Creating a simple "workout builder" where there's a list of exercises in one column with their own descriptions, sample videos, and "add button". When the "add button" is clicked, that specific exercise is moved over to another column. I could obviously give each add button its own ID and hardcode each thing, but I'm trying to do it a bit more elegantly.
I'm trying to write it as a for loop, where each button gets assigned its own event listener. But then, how do I make sure each button only affects a specific div? I'm using querySelectorAll, which I know also creates an array, but how do I make sure that addButton[1] only affects exercise[1] or addButton[45] only affects exercise [45] and so on and so forth.
HTML
<body>
<div class="header">
<h1 class="header-title">WORKOUT BUILDER</h1>
<img id="header-img" src="img/workoutheader.jpg">
</div>
<!-- This is the big list of exercises. -->
<div class="list-of-exercises">
<!-- This is an individual exercise. -->
<div class="exercise" id="power-clean">
<div class="exercise-name">
<h2 class="name" id="power-clean-name">Power Clean</h2>
</div>
<!-- Here's the add button for this specific exercise. As you can see I have a specific ID here where I could hardcore each button, but I'm looking for a more elegant solution. -->
<button class="add-button" id="add-button-power-clean">Add</button>
<!-- This is the rest of the exercise content, like a sample GIF, sets and reps, etc. -->
<div class="exercise-contents" id="power-clean-contents">
<iframe src="https://giphy.com/embed/c10FJ0dpZ5CEF03JTO" width="480" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p></p>
<div class="sets-and-reps-form" id="sets-and-reps-form-power-clean">
<label for="sets">Sets</label>
<input type="number" class="sets" id="sets-power-clean" fname="sets">
<br>
<label for="reps">Reps</label>
<input type="number" class="reps" id="reps-power-clean" fname="reps">
<input class="sets-and-reps-submit" id="sets-and-reps-submit-power-clean" type="submit" value="Submit">
</div>
</div>
</div>
<!-- Here's the start of the next exercise. -->
<div class="exercise" id="back-squat">
<div class="exercise-name">
<h2 class="name" id="back-squat-name">Back Squat</h2>
</div>
<button class="add-button" id="add-button-back-squat">Add</button>
<div class="exercise-contents" id="back-squat-contents">
<div class="tenor-gif-embed" data-postid="24035556" data-share-method="host" data-aspect-ratio="1.49533" data-width="100%">Workouts Squats GIFfrom Workouts GIFs</div> <script type="text/javascript" async src="https://tenor.com/embed.js"></script>
<div class="sets-and-reps-form" id="sets-and-reps-form-back-squat">
<label for="sets">Sets</label>
<input type="number" class="sets" id="sets-back-squat" fname="sets">
<br>
<label for="reps">Reps</label>
<input type="number" class="reps" id="reps-back-squat" fname="reps">
<input class="sets-and-reps-submit" id="sets-and-reps-submit-back-squat" type="submit" value="Submit">
</div>
</div>
</div>
</div>
<!-- This is the div where I want people to be able to "add" the different exercises. -->
<div class="exercise-builder">
<div class="final-readout">
<p id="intensity-score">Intensity Score: 0</p>
<p id="ETA">Estimated Time To Complete Workout: 0</p>
</div>
</div>
<script src="script.js" async defer></script>
</body>
Javascript
let moveToBuilder = function(){
let exerciseBuilder = document.querySelector(".exercise-builder");
let exercise = document.querySelectorAll(".exercise");
// So here I'm just using 0 as the array test value to get it working. But like how could I turn the 0 into something that pairs with the various Submit Button array values? So when I hit the "Power Clean" add button, it only adds Power Clean, etc.
exerciseBuilder.insertBefore(exercise[0], exerciseBuilder.firstChild);
}
for (var i = 0; i < addButton.length; i++) {
addButton[i].addEventListener('click', moveToBuilder, false);
}
Here's your JavaScript with a few tweaks. I've:
Added a little array exercises to allow the needed text to be picked up by index, which in turn is used to find the correct elements;
Used document.getElementById() twice to cleanly pick up elements by id (this is more robust in general that the querySelectorAll(): one weakness of that is that the numbering of the elements changes when they are re-ordered on the page;
Perhaps most importantly, I've added an arrow function to the event listener, which returns a different invocation of moveToBuilder() depending on the value of i. This effectively puts different event listeners on the different buttons, as you wanted; and
To make this work, the scope of the variable i had to be limited with a let declaration rather than var otherwise i = 2 at all material times (after the loop has finished).
let exercises = ["power-clean", "back-squat"]
let moveToBuilder = function(index){
let exerciseBuilder = document.querySelector(".exercise-builder");
let exercise = document.getElementById(exercises[index]);
// So here I'm just using 0 as the array test value to get it working. But like how could I turn the 0 into something that pairs with the various Submit Button array values? So when I hit the "Power Clean" add button, it only adds Power Clean, etc.
exerciseBuilder.appendChild(exercise);
}
for (let i = 0; i < exercises.length; i++) {
document.getElementById(`add-button-${exercises[i]}`).addEventListener('click', () => moveToBuilder(i), false);
}
<body>
<div class="header">
<h1 class="header-title">WORKOUT BUILDER</h1>
<img id="header-img" src="img/workoutheader.jpg">
</div>
<!-- This is the big list of exercises. -->
<div class="list-of-exercises">
<!-- This is an individual exercise. -->
<div class="exercise" id="power-clean">
<div class="exercise-name">
<h2 class="name" id="power-clean-name">Power Clean</h2>
</div>
<!-- Here's the add button for this specific exercise. As you can see I have a specific ID here where I could hardcore each button, but I'm looking for a more elegant solution. -->
<button class="add-button" id="add-button-power-clean">Add</button>
<!-- This is the rest of the exercise content, like a sample GIF, sets and reps, etc. -->
<div class="exercise-contents" id="power-clean-contents">
<iframe src="https://giphy.com/embed/c10FJ0dpZ5CEF03JTO" width="480" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p></p>
<div class="sets-and-reps-form" id="sets-and-reps-form-power-clean">
<label for="sets">Sets</label>
<input type="number" class="sets" id="sets-power-clean" fname="sets">
<br>
<label for="reps">Reps</label>
<input type="number" class="reps" id="reps-power-clean" fname="reps">
<input class="sets-and-reps-submit" id="sets-and-reps-submit-power-clean" type="submit" value="Submit">
</div>
</div>
</div>
<!-- Here's the start of the next exercise. -->
<div class="exercise" id="back-squat">
<div class="exercise-name">
<h2 class="name" id="back-squat-name">Back Squat</h2>
</div>
<button class="add-button" id="add-button-back-squat">Add</button>
<div class="exercise-contents" id="back-squat-contents">
<div class="tenor-gif-embed" data-postid="24035556" data-share-method="host" data-aspect-ratio="1.49533" data-width="100%">Workouts Squats GIFfrom Workouts GIFs</div> <script type="text/javascript" async src="https://tenor.com/embed.js"></script>
<div class="sets-and-reps-form" id="sets-and-reps-form-back-squat">
<label for="sets">Sets</label>
<input type="number" class="sets" id="sets-back-squat" fname="sets">
<br>
<label for="reps">Reps</label>
<input type="number" class="reps" id="reps-back-squat" fname="reps">
<input class="sets-and-reps-submit" id="sets-and-reps-submit-back-squat" type="submit" value="Submit">
</div>
</div>
</div>
</div>
<!-- This is the div where I want people to be able to "add" the different exercises. -->
<div class="exercise-builder">
<div class="final-readout">
<p id="intensity-score">Intensity Score: 0</p>
<p id="ETA">Estimated Time To Complete Workout: 0</p>
</div>
</div>
<script src="script.js" async defer></script>
</body>
Here's my jQuery
jQuery(document).ready(function($) {
$("#accordion").find(".accordion-toggle").click(function(){
$(this).next().slideToggle("fast");
$(".accordion-content").not($(this).next()).slideUp("fast");
});
});
Here's my HTML
<div id="accordion">
<header class="accordion-toggle">
<h2>Accordion Title <span id="accordionIcon">▼</span></h2>
</header>
<section class="entry accordion-content">
<p>Accordion Content</p>
</section>
</div>
Whenever a new accordion-toggle is clicked I need the old accordionIcon to change to the opposite arrow, and the new one to change also. I've tried doing it using $(".accordion-content").not($(this).next()).parent().find('#accordionIcon') but it can't find the correct element
Here's a fiddle. Is this what you are looking for?
This is the code I added.
if($(this).find("span#accordionIcon").text()=="▼"){
$(this).find("span#accordionIcon").text("▲");
}
else{
$(this).find("span#accordionIcon").text("▼");
}
Accepted answer will only work with one toggle.
Here is the version (Codepen), that work with multiple:
HTML
<div id="accordion">
<header class="accordion-toggle">
<h2>Accordion Title 1<span>▲</span></h2>
</header>
<section class="entry accordion-content">
<p>Accordion Content</p>
</section>
<header class="accordion-toggle">
<h2>Accordion Title 2<span>▲</span></h2>
</header>
<section class="entry accordion-content">
<p>Accordion Content</p>
</section>
</div>
JS
jQuery(document).ready(function($) {
$("#accordion").find(".accordion-toggle").click(function(){
if ($(this).find('span').text() == '▼') {
$(this).siblings(".accordion-content").slideUp("fast");
$(this).siblings(".accordion-toggle").find('span').text('▼');
$(this).next().slideDown("fast");
$(this).find('span').text('▲');
} else {
$(this).next().slideUp("fast");
$(this).find('span').text('▼');
}
});
});
Or without change your code, you can do like that :
jQuery(document).ready(function($) {
$("#accordion").find(".accordion-toggle").click(function(){
var span = $(this).find('span');
if (span.hasClass('isOpened')) {
span.removeClass('isOpened').html('▲');
} else {
span.addClass('isOpened').html('▼');
}
$(this).next().slideToggle("fast");
$(".accordion-content").not($(this).next()).slideUp("fast");
});
});
JSFIDDLE
If you want to use font-awesome
jQuery(document).ready(function($) {
$("#accordion").find(".accordion-toggle").click(function(){
$(this).next().slideToggle("fast");
if($(".fa").hasClass("fa-arrow-down")){$(".fa").removeClass("fa-arrow-down").addClass("fa-arrow-up");}
else $(".fa").removeClass("fa-arrow-up").addClass("fa-arrow-down");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="accordion">
<header class="accordion-toggle">
<h2>Accordion Title <i class="fa fa-arrow-down"></i></h2>
</header>
<section class="entry accordion-content">
<p>Accordion Content</p>
</section>
</div>
I dropped to use Accordion because a few my customers requested to compare 2 answers, but mostly because of efficiency to use simple HTML5 Details control that I tested for 1000 questions! in a single FAQ page for my new customer's estimate. The issues with the Accordion starts from 140 items, see
https://github.com/twbs/bootstrap/issues/26419
Here is simplest and efficient solution with full control and automatic "Collapse All" button appearance and disappearance. If you would like to see the more advanced implementation on the real website: https://airtempheating.com/faq
<details>
<summary>
Is there any advantage to setting the thermostat fan setting to “On” or “Auto” mode all the time?</summary>
Yes! You will have constant filtering of the air. A second advantage is that the constant airflow will allow an even temperature throughout your home.
However, if your home feels very humid, set the fan to the “Auto” mode.
</details>
<details>
<summary>
How long does a typical furnace or air conditioner last?</summary>
New air conditioning and heating equipment lasts longer than ever! The end of a furnace's or air conditioner’s service life depends on more than just chronological age.
Energy-efficiency issues and the price of any necessary repairs versus the cost of upgrading to a new unit all enter into that determination.
</details> <hr>
<button type="button" id="hdn" class="btn btn-primary" onClick="window.location.reload();">Collapse All</button>
<style>
#hdn{display:none; visibility:visible}
</style>
<script>
$(function() {$('summary').click(function() {if($('#hdn').css("display") == "none"){$('#hdn').show();}});});
</script>
<div id="CntWrapper_CntMain_ssm_ctl00_ctl01" class="matrix">
<div class="CollapseGroup1"></div>
<div class="row">
<div class="cell_24"> </div>
</div>
<div class="row">
<div class="cell_24">
<span class="label-passive">text</span>
</div>
</div>
<div class="CollapseGroupClose1"></div>
</div>
I'm trying to manipulate above HTML code sample. It's a simplified version the actual HTML code.
<script type="text/javascript">
$(document).ready(function() {
$('.CollapseGroup1').nextUntil('.CollapseGroupClose1',').css( "display", "none" );
});
</script>
This script hides all the div with class 'row' between the two divs called collapsegroup and collapsegroupclose.
However, I only want to hide the div elements with class 'Row' when any of these rows contain at least one span with class 'label-passive'.
<script type="text/javascript">
$(document).ready(function() {
$('.CollapseGroup1').nextUntil('.CollapseGroupClose1','div[.label-passive]').css( "display", "none" );
});
</script>
Just simply hiding any row div when there is a span with label-passive is not good enough. There can be rows with 'label-passive' span classes outside these collapsegroup divs that I don't want to hide.
I want to hide all rows between two collapsegroup tags, even when just one of these rows actually has a child span element with class 'label-passive'.
So, after reading your question once.. Twice.. Trice.. I think you want this:
(pro-tip: try to keep your questions as simple as possible, using pseudo-code if you must)
$('.label-passive').parents('._row').hide();
If this isn't completely what you wanted, leave a comment and I'll try to improve the answer.
Edit: Improved answer as OP improved his question:
Maybe this will help you further then:
$('.CollapseGroup1').each(function() {
if ($(this).find(".label-passive").length != 0)
$(this).hide();
});
You can simply try this:
$('div.row:has(.label-passive)').hide();
Try closest():
$('span.label-passive').closest('div.row').hide();
$(function() {
$('span.label-passive').closest('div.row').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="CntWrapper_CntMain_ssm_ctl00_ctl01" class="matrix">
<div class="CollapseGroup1"></div>
<div class="row">
<div class="cell_24"> </div>
</div>
<div class="row">
<div class="cell_24">
<span class="label-passive">text</span>
</div>
</div>
<div class="CollapseGroupClose1"></div>
</div>
I am working on a webpage for a family member, and most content is generated upon load.
My specific problem lies in a news-function, where you can add new products. Because of the way the website is built we have added a link to the news-item, in order to allow costumers to go directly to the product. ( link is "Se mere" )
Trouble is:
When adding the new item to the news-feed, all links and formatting disappears when its shown on the right side of the page. (This is where the code is from)
Therefore, i would like to remove the "Se mere" text from the right coloumn, in the div class = "NewsItemPreviewText"
Unfortunately, i cannot access that part of the code, so i cannot choose what and how its printet.
Here you can see original code that i have access to,
`<div id="RightColumn">{$Design.rightColumn}</div>`
and this is how the code looks when generated.
<div id="RightColumn">
<div id="pagenews-box">
<div id="pagenews-box-top">
<h2>Nyheder</h2>
</div>
<div id="pagenews-box-content"> <div class="NewsItemPreview NewsItem1">
<div class="NewsItemPreviewImg">
<a href="/nyheder/4-revitive-isorocker-/#4" title="Revitive Isorocker ">
<img src="/upload_dir/news/REVITIVEIX.w50.h50.crop.jpg" style="border:0px;" alt="Revitive
Isorocker ">
</a>
</div>
<div class="NewsItemPreviewContent" style="width:110px">
<div class="NewsItemPreviewDate">
<a href="/nyheder/4-revitive-isorocker-/#4" title="Revitive Isorocker "
class="NewsItemPreviewLink">Revitive Isorocker </a>
<br>
<div class="NewsItemPreviewDateCreated">26/11 2014 kl. 12:20
</div>
</div>
<div class="NewsItemPreviewText">
Årets julegavehit!
KUN 1795,-kr. hos os!
Se mere
</div>
</div>
</div>
</div>
<div id="pagenews-box-bottom">
</div>
</div>`
</div>
I hope you can help, please let me know if i have omitted any necessary details or code.
Using JQuery this can be done by targeting the container("NewsItemPreviewText") containing the text "Se mere" and removing it.
$('.NewsItemPreviewText:contains("Se mere")').each(function(){
$(this).html($(this).html().split("Se mere").join(""));
});
JSFiddle
You can remove it with jQuery.
http://jsfiddle.net/wilchow/pzrn88m4/
$(document).ready(function() {
$(".NewsItemPreviewText").text($(".NewsItemPreviewText").text().replace("Se mere", ""));
});
Hope this helps :)
$(':contains("Se mere")').each(function(){
$(this).html($(this).html().split("Se mere").join(""));
});
I recently had a 30 min test for a job application using only Javascript with jQuery. Didn't have to be styled well or anything. I created a very basic "30 min" page with Javascript and jQuery which I thought was "ok".. I just wanted to get some feedback if there was a more efficient/better way of doing this? as it turned out, I didn't get the job.. always learning, and also the job was quite a way from where I live.
Anyway, the original HTML page given was as follows, and after that is my humble attempt to turn the basic HTML into a tab based content page - again within 30 mins.
<html>
<head>
<!-- stylesheet, javascript, etc. here -->
</head>
<body>
<h1>My Page</h1>
<h2 class="subheading">The first section</h2>
<div class="content">
<p>Lorem ipsum...</p>
</div>
<h2 class="subheading">The second section</h2>
<div class="content">
<img src="/some_image" alt="Image" title="Image"></img>
<p>Some other text</p>
</div>
<h2 class="subheading">The third section</h2>
<div class="content">
And some more text here
</div>
<div class="footer">
This is at the foot of the page
</div>
</body>
</html>
Ok, so my humble attempt is as follows:
<html>
<head>
<title>Test JS page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
#tabs
{
width:457px;
height:60px;
}
#tab1, #tab2, #tab3
{
width:150px;
border:1px solid #ccc;
}
#tab1
{
float:left;
}
#tab3, #tab2
{
float:right;
}
#tab2_content, #tab3_content
{
display:none;
}
.clear
{
clear:both;
}
#content
{
height:300px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#tab1_link').click(function (e) {
e.preventDefault();
clearContent();
$('#tab1_content').show();
});
$('#tab2_link').click(function (e) {
e.preventDefault();
clearContent();
$('#tab2_content').show();
});
$('#tab3_link').click(function (e) {
e.preventDefault();
clearContent();
$('#tab3_content').show();
});
});
function clearContent() {
$("div[id*='_content']").each(function() {
$(this).hide();
});
}
</script>
</head>
<body>
<h1>My Page</h1>
<div id="tabs">
<div id="tab1"><a id="tab1_link" class="subheading">The first section</a></div>
<div id="tab2"><a id="tab2_link" class="subheading">The second section</a></div>
<div id="tab3"><a id="tab3_link" class="subheading">The third section</a></div>
</div>
<div class="clear">
</div>
<div id="content">
<div id="tab1_content" class="content">
<p>Lorem ipsum...</p>
</div>
<div id="tab2_content" class="content">
<img src="/some_image" alt="Image" title="Image"></img>
<p>Some other text</p>
</div>
<div id="tab3_content" class="content">
And some more text here
</div>
</div>
<div class="footer">
This is at the foot of the page
</div>
</body>
</html>
So as you can see, not pretty for sure.. the stylesheet was inline as is the script, however this was meant to be a test to show if you knew Javascript/jQuery enough to perform the tasks.. I figured it wasn't great, but not too bad either..
I would be grateful for any feedback on other ways to achieve the desired result.. again it doesn't have to be pretty, just functional.. and of course all within 30 mins..
Thanks!
<div id="tabs">
<ul>
<li>The First Section</li>
<li>The Second Section</li>
<li>The Third Section</li>
</ul>
<div id="tabs-1" class="content">
<p>Lorem ipsum...</p>
</div>
<div id="tabs-2" class="content">
<img src="/some_image" alt="Image" title="Image"></img>
</div>
<div id="tabs-3" class="content">
<p>Some other text</p>
</div>
</div>
<script>
$(function() {
$("#tabs").tabs();
});
</script>
http://jqueryui.com/demos/tabs/
Without knowing something about the company you were taking the test for its hard to say what they were looking for.
In general employers are not looking for perfect code but how you approach the problem. For example you could say that they were looking to see if you would follow their instructions blindly or stick to convention and good practices of adding external style/script references or just clean, standard compliant, concise code.
I am a complete novice so please don't take anything I say too seriously but I would of attempted to create some reusable concise code which would/could be reused and expanded very quickly and easily while being maintenance friendly (Just because its a text doesn't mean that you can forget about these things).
Just doing this very rough and off the top of my head but something like this:
$('#tab-menu').click(function(e) {
e.preventDefault();
clearContent();
$(this).show();
});
If it was for a company that were involved with mobile devices you would probably want to bind the events so you get the same functionality.
Something that I have always done is provided an assumptions document even just if its in notepad. Its always looked upon positively as it shows you are stopping and thinking about what you have to do instead of going gun ho.
Overall I think you did a good job! You have a great attitude and just learn from experiences like these, improve and get better! Today's juniors will be tomorrows experts! if we work hard enough
you don't need jQuery UI for this.
demo http://jsbin.com/atogil/2/edit
HTML
<div class="tabs">
<nav class="tab-btns">
tab btn 1
tab btn 2
tab btn 3
tab btn 4
</nav>
<div class="tab-contents">
<div id="tab1">tab content 1</div>
<div id="tab2">tab content 2</div>
<div id="tab3">tab content 3</div>
<div id="tab4">tab content 4</div>
</div>
</div>
JS
$.fn.myTabs = function(settings){
return this.each(function() {
/*
save cached version of the first elements inside the containers.
by calling the first elements of each container you are not limitng
the plugin user to any specific class or elememt.
*/
var btns = $(settings.nav, this).children(),
tabs = $(settings.tabs, this).children();
/*
we relying on the order of the elements as the conection between
the buttons and the tabs notice that .each() get the index of the btn..
we are useinf it to find the current tab.
*/
btns.each(function(index){
var btn = $(this),
tab = tabs.eq(index);
btn.click(function (e){
/* prevent unnesscry work by checking
if the button clicked is already active */
if(btn.is('.active')) return false;
/* notice that first filter to find the last 'active'
button before we remove the 'active' class otherwise it
remove the class for every button.
unnesscry work prevented again */
btns.filter('.active').removeClass('active');
/* hide previus tab.. */
tabs.filter(':visible').hide();
btn.addClass('active');
tab.show();
return false;
});
});
// emulate click on the first tab button;
btns.first().click();
});
};
and call your script like this;
$(function() {
$('.tabs').myTabs({
// container of navigation inside '.tabs'
nav : '.tab-btns',
// container of contents inside '.tabs'
tabs : '.tab-contents'
});
});