Solved

Simplify jquery - part two

Posted on 2012-12-27
9
396 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
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.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

914 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now