Solved

Simplify jquery - part two

Posted on 2012-12-27

4 solutions

Medium Priority

404 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:Navneet

Navneet earned 500 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 500 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 500 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 500 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

Understanding JSON in PHP and JavaScript Applications

Article by: Ray

Introduction JSON is an acronym for JavaScript Object Notation. It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner. Similar in concept to XML, but more e…

Creating linked dropdowns using jQuery and PHP

Article by: Julian

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

Arithmetic and Boolean Expressions in Java

Video by: Salmaan

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…

Flexible Layouts

Video by: Mark

Learn how to create flexible layouts using relative units in CSS. New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).