• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 234
  • Last Modified:

simplify jquery

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
Panos
Asked:
Panos
  • 9
  • 7
1 Solution
 
leakim971PluritechnicianCommented:
use a third class

<li class="tab_content2 mytabclass"

<li class="tab_content3 mytabclass"

$(".myclass").show();
0
 
PanosAuthor Commented:
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
 
PanosAuthor Commented:
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
leakim971PluritechnicianCommented:
This is what I wrote : $(".myclass").show();
This is what you wrote : $(".tab_def:first").show();
0
 
leakim971PluritechnicianCommented:
check this test page : http://jsfiddle.net/Sytqy/
0
 
PanosAuthor Commented:
It is not working
0
 
leakim971PluritechnicianCommented:
on my side I see the textarea for example, not you?
0
 
PanosAuthor Commented:
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
 
PanosAuthor Commented:
what i see
screen.gif
0
 
leakim971PluritechnicianCommented:
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
 
PanosAuthor Commented:
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
 
leakim971PluritechnicianCommented:
if you cannot group your class, div, object to a specific class, there's no method to simplify your code
0
 
PanosAuthor Commented:
I suppose i have to keep my old code
0
 
PanosAuthor Commented:
I did find a server side solution for this.
Thank you for your help
0
 
PanosAuthor Commented:
Thank you
regards
panos
0
 
leakim971PluritechnicianCommented:
you're welcome!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 9
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now