Solved

Simplify jquery - part two

Posted on 2012-12-27
9
398 Views
Last Modified: 2013-01-01
Hello experts.
I'm trying to simplify my jquery code.
This is my second question .
Can i simplify the code below? f.e use index instead of numbers.
// JavaScript Document
$(document).ready(function () {
    //Default Action
    $(".tab_content1,.tab_content2").hide(); //Hide all content
    $("ul.tabs1 li:first,ul.tabs2 li:first").addClass("active").show(); //Activate first tab
    $(".tab_content1:first,.tab_content2:first").show(); //Show first tab content
    //On Click Event
    $("ul.tabs1 li").click(function () {
        $("ul.tabs1 li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content1").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
    });
    $("ul.tabs2 li").click(function () {
        $("ul.tabs2 li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content2").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
    });
}); 

Open in new window

0
Comment
Question by:Panos
9 Comments
 
LVL 15

Assisted Solution

by:navneethegde
navneethegde earned 125 total points
ID: 38725983
Dear!

Yes sure you can
It would be better if you could share html to guide you better.

However though
You can use
live( type, fn)  and $(this) will give you the current object,  you can check object type and call methods

ex
    $("ul > div  > li ").live("click", function() {
      $(this).removeClass("active"); //Remove any "active" class
    });



Thanks!
0
 
LVL 2

Author Comment

by:Panos
ID: 38726280
Hi navneethegde
Thank you for your post.
Attached html and css .Can you take a look.

<style type="text/css">
@charset "utf-8";
/* CSS Document */
/* Style for insert form */
ul.tabs1,
ul.tabs2{
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px;
	width: 100%;
}
ul.tabs1 li,
ul.tabs2 li {
float: left;margin: 0;padding: 0;height: 31px;line-height: 31px;border: 1px solid #CCC;border-left: none;margin-bottom: -1px;background: #e0e0e0;overflow: hidden;position: relative;}
ul.tabs1 li a,
ul.tabs2 li a{
text-decoration: none;color: #000;display: block;font-size: 1.2em;padding: 5px 10px 5px 10px;outline: none;}
ul.tabs1 li a:hover,
ul.tabs2 li a:hover{
	background: #ccc;
}
.listfirst {
}
.listlast {
}	
html ul.tabs1 li.active, html ul.tabs1 li.active a:hover,
html ul.tabs2 li.active, html ul.tabs2 li.active a:hover{
	background: #fff;
	border-bottom: 1px solid #fff;
}

.tab_container {
	clear: both;
	float: left; 
	width: 100%;
}
.tab_content1,
.tab_content2{
	padding: 10px 0px 10px 0px;
	font-size: 1.2em;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
    //Default Action
    $(".tab_content1,.tab_content2").hide(); //Hide all content
    $("ul.tabs1 li:first,ul.tabs2 li:first").addClass("active").show(); //Activate first tab
    $(".tab_content1:first,.tab_content2:first").show(); //Show first tab content
    //On Click Event
    $("ul.tabs1 li").click(function () {
        $("ul.tabs1 li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content1").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
    });
    $("ul.tabs2 li").click(function () {
        $("ul.tabs2 li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content2").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
    });
}); 
</script>
<div id="formholder">
   <form id="insertform" method="post">
      <div id="step_1" class="clearboth" style="display:block">
         <div class="cearboth flleft">
            <label>Name<font color="#FF0000">*</font>:</label>
            <ul class="tabs1">
               <li class="listfirst">
                  <a href="#Atab3">
                  <img src="img/Germany.gif" border="0" alt="Germany.gif" />
                  </a>
               </li>
               <li class="listlast">
                  <a href="#Atab2">
                  <img src="http://2eat.selfip.com/img/UK.gif" border="0" alt="UK.gif" />
                  </a>
               </li>
            </ul>
            <ul class="tab_container">
               <li id="Atab3" class="tab_content1">
                  <input name="recipe_3" class="recipe isrequired inline" type="text" value="" />
               </li>
               <li id="Atab2" class="tab_content1" style="display:none;">
                  <input name="recipe_2" class="recipe isrequired inline" type="text" value="" />
               </li>
            </ul>
         </div>
         <div class="clearboth">
            <label>Briefdescription</label>
            <ul class="tabs2">
               <li class="listfirst">
                  <a href="#Btab3">
                  <img src="img/Germany.gif" border="0" alt="Germany.gif" />
                  </a>
               </li>
               <li class="listlast">
                  <a href="#Btab2">
                  <img src="img/UK.gif" border="0" alt="UK.gif" />
                  </a>
               </li>
            </ul>
            <ul class="tab_container">
               <li id="Btab3" class="tab_content2" style="display:none;">
                  <textarea name="Briefdescription_3" id="Briefdescription_3" class="" cols="70" rows="4"></textarea>
               </li>
               <li id="Btab2" class="tab_content2" style="display:none;">
                  <textarea name="Briefdescription_2" id="Briefdescription_2" class="" cols="70" rows="4"></textarea>
               </li>
            </ul>
         </div>
         <div class="clearboth">&nbsp;</div>
         <br />
         <p class="stepcommands clearboth">
            <button type="submit" id="" class="CSS3BUTTON next">¿p¿µe¿¿ &gt;</button>
         </p>
      </div>
   </form>
</div>

Open in new window

0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 125 total points
ID: 38732021
1) change class to tabs instead of having tabs1 and tabs2 those should be ID instead

2) then have only one CSS and one function. .on is the thing to use instead of deprecated .live


// JavaScript Document
$(document).ready(function () {
    //Default Action
    $(".tab_content1,.tab_content2").hide(); //Hide all content
    $(".tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content1:first,.tab_content2:first").show(); //Show first tab content
    //On Click Event
    $("ul.tabs li").on("click"function () {
        $(this).siblings().not(this).removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content"+$(this).index()).hide(); //Hide all tab content of this tab
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
    });
}); 

Open in new window

0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 28

Assisted Solution

by:sybe
sybe earned 125 total points
ID: 38732118
No idea why you need jquery for such a simple thing. But if you want then go ahead. Jquery isn't 'simple', but rather complicating things. If it works, I do not see a reason to simplify your code. Your code is not going to be faster or better readable. If you want it simple, then avoid jquery.

But anyway:
1. In HTML/CSS, if you set all content to hidden (display:none in css) except the first tab plus its content, you do not need to hide/unhide it when the page has loaded. That saves the first three lines of code.

2. It is easier to use id's in stead of a complicated way to find the element clicked and the element to be shown.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38732276
I am the the first to tell people not to use jQuery for simple tasks. In this case I do not agree with you at all Sybe. Much easier using jQuery than plain JS here.
0
 
LVL 12

Assisted Solution

by:jagssidurala
jagssidurala earned 125 total points
ID: 38733988
instead of hard code the ids assign common Css class to firstli, tabcontent and change your code as below

// JavaScript Document
$(document).ready(function () {
    //Default Action

    $(".tabcontent").hide(); //Hide all content
    $(".firstli").addClass("active").show(); //Activate first tab
    $(".firsttabcontent").show(); //Show first tab content

    //On Click Event
function fncDisplay(1);
function fncDisplay(2);
function fncDisplay(3);
function fncDisplay(4);
.
.
.

 
});


function fncDisplay(tabnumber)
{
$("#firstliTab"+tabnumber).click(function () {
        $(this).removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $("#tabcontent"+tabnumber).hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
    });
}
0
 
LVL 2

Author Closing Comment

by:Panos
ID: 38734315
Thank you all for your help.
Happy new year
regards
panos
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question