Solved

simplify jquery

Posted on 2013-01-19
16
218 Views
Last Modified: 2013-01-19
Hello .
I s there any way to simplify the code below?
$(".tab_content2:first,.tab_content3:first").show();

using an index instead of 2 - 3 ....
0
Comment
Question by:Panos
  • 9
  • 7
16 Comments
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
use a third class

<li class="tab_content2 mytabclass"

<li class="tab_content3 mytabclass"

$(".myclass").show();
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
hi
it is working only for the first one
below the script:
$(document).ready(function () {
    //$(".tab_content1:first,.tab_content2:first,.tab_content3:first,.tab_content4:first").show(); //Show first tab content
      $(".tab_def:first").show();
    //On Click Event
    $("ul.tabs li").on("click",function () {
            var target = $(this).parent()[0].id
            var i = target.split("_");
        var targetid = i[1];
        $(this).siblings().not(this).removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content" + targetid).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;
    });
});
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
The html code could help
<style type="text/css">
ul.tabs{
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px;
	width: 100%;
}
ul.tabs 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.tabs li a{
text-decoration: none;color: #000;display: block;font-size: 1.2em;padding: 5px 10px 5px 10px;outline: none;}
ul.tabs li a:hover{
	background: #ccc;
}
.listfirst {
}
.listlast {
}
html ul.tabs li.active, html ul.tabs li.active a:hover{
	background: #fff;
	border-bottom: 1px solid #fff;
}

.tab_container {
	clear: both;
	float: left; 
	width: 100%;
}
.tab_def{ display:none;
	padding: 10px 0px 10px 0px;
	font-size: 1.2em;
}
</style>

<div style="display:block" class="clearboth" id="step_1">
  <div class="cearboth flleft">
    <label>
      Name :
    </label>
    <ul id="tabs_1" class="tabs">
      <li class="listfirst active">
        <a href="#atab3">German
        </a>
      </li>
      <li class="listlast">
        <a href="#atab2">English
        </a>
      </li>
    </ul>
    <ul class="tab_container">
      <li class="tab_content1 tab_def" id="atab3" style="display: list-item;">
        <input type="text" value="" class="recipe isrequired inline" name="recipe_3">
      </li>
      <li style="display: none;" class="tab_content1 tab_def" id="atab2">
        <input type="text" value="" class="recipe isrequired inline" name="recipe_2">
      </li>
    </ul>
  </div>
  <div class="clearboth">
    <label>
      Description
    </label>
    <ul id="tabs_2" class="tabs">
      <li class="listfirst active">
        <a href="#btab3">German
        </a>
      </li>
      <li class="listlast">
        <a href="#btab2">English
        </a>
      </li>
    </ul>
    <ul class="tab_container">
      <li style="display:none;" class="tab_content2 tab_def" id="btab3">
        <textarea rows="4" cols="70" class="" id="Briefdescription_3" name="Briefdescription_3"><wbr ></wbr>
        </textarea>
      </li>
      <li style="display:none;" class="tab_content2 tab_def" id="btab2">
        <textarea rows="4" cols="70" class="" id="Briefdescription_2" name="Briefdescription_2"><wbr ></wbr>
        </textarea>
      </li>
    </ul>
  </div>
</div>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
This is what I wrote : $(".myclass").show();
This is what you wrote : $(".tab_def:first").show();
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
check this test page : http://jsfiddle.net/Sytqy/
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
It is not working
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
on my side I see the textarea for example, not you?
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
hmm...
The idea is to show the first text field and the first textarea.
That's why i did use the first attribute.
It is working using the old script.
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 2

Author Comment

by:Panos
Comment Utility
what i see
screen.gif
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
yes because you add tab_def for tab_content1 too

should be only for the groupe you want to hide :

.tab_content2,.tab_content3 => tabdef
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
hmmmm... I did confuse you.
I wanted a more simple js and css code.
Using a third class in the js code and a tab_def class would solve the problm
i can have 'n' tab groups with the same js and css code , changing only id's and adding a different  .tab_content(x) class. that was the idea . sorry again.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
Comment Utility
if you cannot group your class, div, object to a specific class, there's no method to simplify your code
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
I suppose i have to keep my old code
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
I did find a server side solution for this.
Thank you for your help
0
 
LVL 2

Author Closing Comment

by:Panos
Comment Utility
Thank you
regards
panos
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
you're welcome!
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

762 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

7 Experts available now in Live!

Get 1:1 Help Now