Solved

Simplify jquery - part two

Posted on 2012-12-27

4 solutions

402 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

Comment

Question by:Panos

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

9 Comments

LVL 15

Assisted Solution

by:navneethegde

navneethegde earned 125 total points

ID: 387259832012-12-27

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!

LVL 2

Author Comment

by:Panos

ID: 387262802012-12-28

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

LVL 75

Accepted Solution

by:Michel Plungjan

Michel Plungjan earned 125 total points

ID: 387320212012-12-30

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

LVL 28

Assisted Solution

by:sybe

sybe earned 125 total points

ID: 387321182012-12-31

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.

LVL 75

Expert Comment

by:Michel Plungjan

ID: 387322762012-12-31

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.

LVL 12

Assisted Solution

by:jagssidurala

jagssidurala earned 125 total points

ID: 387339882012-12-31

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;
});
}

LVL 2

Author Closing Comment

by:Panos

ID: 387343152013-01-01

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

Featured Post

Question has a verified solution.

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

Handling Time and Date in PHP and MySQL - OOP Version

Article by: Ray

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL several years ago, it seemed like now was a good time to update it for object-oriented PHP. This article does that, replacing as much as possible the pr…

Creating linked dropdowns using jQuery and PHP

Article by: Julian

This article discusses how to create an extensible mechanism for linked drop downs.

If Statement in Java

Video by: Salmaan

Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:

How to Add a Watermark to an Image Using PHP (Part 2)

Video by: Marco

This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.