Simplify jquery - part two

Panos
Panos used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solutions Only
Navneet.Net Full Stack Developer
Commented:
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!
Panos

Author

Commented:
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

IT Expert
Top Expert 2009
Commented:
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

OWASP Proactive Controls

Learn the most important control and control categories that every architect and developer should include in their projects.

Start Today!
sybe
Commented:
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.
Michel PlungjanIT Expert
Top Expert 2009

Commented:
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.
jagssidurala
Commented:
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;
    });
}
Panos

Author

Commented:
Thank you all for your help.
Happy new year
regards
panos

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial