[singularity]

Hey I have a jquery code fragment that does the job as it is supposed to do. However the code is too long and since jquery is write less, I don't want to write so much stuff.
Basically I am looking to use a loop here, but can't figure out how.

Can someone point me in the right direction.

here is my code:

<script type="text/javascript">
	$("document").ready(function() {
		$("#bcottage").click(function() {
			$("#tab2,#tab3,#tab4,#tab5").hide();
			$("#tab1").show();
		});
		$("#bwebsites").click(function() {
			$("#tab1,#tab3,#tab4,#tab5").hide();
			$("#tab2").show();
		});
		$("#bprinted").click(function() {
			$("#tab1,#tab2,#tab4,#tab5").hide();
			$("#tab3").show();
		});
		$("#bcomm").click(function() {
			$("#tab1,#tab2,#tab3,#tab5").hide();
			$("#tab4").show();
		});
		$("#bstocks").click(function() {
			$("#tab1,#tab2,#tab3,#tab4").hide();
			$("#tab5").show();
		});
			$("#cs").click(function() {
		$("#coltable1").css("display","block")
		$("#coltable2,#coltable3,#coltable4,#coltable5").css("display","none")
	});
	$("#fs").click(function() {
		$("#coltable2").css("display","block")
		$("#coltable1,#coltable3,#coltable4,#coltable5").css("display","none")
	});
	$("#fes").click(function() {
		$("#coltable3").css("display","block")
		$("#coltable2,#coltable1,#coltable4,#coltable5").css("display","none")
	});
	$("#sb").click(function() {
		$("#coltable4").css("display","block")
		$("#coltable2,#coltable1,#coltable3,#coltable5").css("display","none")
	});
		$("#wp").click(function() {
		$("#coltable5").css("display","block")
		$("#coltable2,#coltable1,#coltable4,#coltable3").css("display","none")
	});
	});
</script>

Thanks

[Martyr2]

Can you show us the HTML structure with these elements in it? I think a solution where you are manipulating some of these tabs based on their position in the document may be better. Looping through an elements children for example. You could put this loop in a separate function and pass it an index and it will loop through all tab children and based on the index, show or hide that element.

It would be much shorter and avoid element lists containing ID names. The loop function would be like 4 lines and knock out 20 lines of your code.

[singularity]

My html is too long and contains a lots of erroneous code. In short my page has five tabs within 5 div elements, Inside each div/tab, I have more than one table. These tables need to be shown/hidden on click event and that is why I am using show hide. Now for the tabs I am using css display block/none property to display a particular tab within all the tables inside it.

Hope that helps you to understand my page structure.


And btw thanks for that project list.

[Jstall]

Hi,
Well I can't see using a loop but you could just use a couple functions. Something like :

function hide_tabs(num)
{
  $("#tab1,#tab2,#tab3,#tab4,#tab5").hide();
  $("#tab" + num).show();
}

function hide_cols(num)
{
  $("#coltable1,#coltable2,#coltable3,#coltable4,#coltable5").css("display","none");
  $("#coltable" + num).
}

Then call it like:

    $("#bstocks").click(function() {
       hide_tabs(5);
    });

That may be what you are looking for. It's a tad inefficient since it hides all elements then revels the one specified by the parameter, but there shouldn't be that much overhead from it and it may not be worth having to filter against the one element passed in, unless you have to.

[hawk3st]

Half a sleep, but you could set up an array for each list.

Array1(#b1,#b2,#b3,#b4,#b5)
Array2(#tab1,#tab2,#tab3,#tab4,#tab5)

The you need to do a less specific jquery selector. Like

$('#containerId div').click(function(){

});

Ok, pseudo code for the loop, remembering av had a few. Lol

For each x in array1
If $(this.id) not == x.value then
$(array2(x)).hide
Else
$(array2(x)).show
End if
Next x

Hope that helps. Think it'll work.

Will probably look at it tomorrow and kick myself. Lol


Sent from my HTC Desire using Tapatalk

This post has been edited by hawk3st: 05 February 2011 - 06:29 PM

[Wimpy]

For the first part:

$("#bcottage").click(function() {
    $("#tab2,#tab3,#tab4,#tab5").hide();
    $("#tab1").show();
});
$("#bwebsites").click(function() {
    $("#tab1,#tab3,#tab4,#tab5").hide();
    $("#tab2").show();
});
$("#bprinted").click(function() {
    $("#tab1,#tab2,#tab4,#tab5").hide();
    $("#tab3").show();
});
$("#bcomm").click(function() {
    $("#tab1,#tab2,#tab3,#tab5").hide();
    $("#tab4").show();
});
$("#bstocks").click(function() {
    $("#tab1,#tab2,#tab3,#tab4").hide();
    $("#tab5").show();
});

you should be able to do something like this:

var ids =
[
	"#bcottage",
	"#bwebsites",
	"#bprinted",
	"#bcomm",
	"#bstocks"
];

for (var i = 0, id; id = ids[i]; i++)
{
	$(id).click(function() {
		$("#tab1,#tab2,#tab3,#tab4,#tab5").hide();
		$("#tab" + (i + 1)).show();
	});
}

To clean up your code some more you should give all tabs a mutual class name like "Tab" to reduce $("#tab1,#tab2,#tab3,#tab4,#tab5").hide(); to $(".Tab").hide();

I think you could clean up the second part by simply following the above pattern.

Hope it helps!

This post has been edited by Wimpy: 06 February 2011 - 02:20 AM

[singularity]

Wimpy, on 06 February 2011 - 09:19 AM, said:

For the first part:

$("#bcottage").click(function() {
    $("#tab2,#tab3,#tab4,#tab5").hide();
    $("#tab1").show();
});
$("#bwebsites").click(function() {
    $("#tab1,#tab3,#tab4,#tab5").hide();
    $("#tab2").show();
});
$("#bprinted").click(function() {
    $("#tab1,#tab2,#tab4,#tab5").hide();
    $("#tab3").show();
});
$("#bcomm").click(function() {
    $("#tab1,#tab2,#tab3,#tab5").hide();
    $("#tab4").show();
});
$("#bstocks").click(function() {
    $("#tab1,#tab2,#tab3,#tab4").hide();
    $("#tab5").show();
});

you should be able to do something like this:

var ids =
[
	"#bcottage",
	"#bwebsites",
	"#bprinted",
	"#bcomm",
	"#bstocks"
];

for (var i = 0, id; id = ids[i]; i++)
{
	$(id).click(function() {
		$("#tab1,#tab2,#tab3,#tab4,#tab5").hide();
		$("#tab" + (i + 1)).show();
	});
}

To clean up your code some more you should give all tabs a mutual class name like "Tab" to reduce $("#tab1,#tab2,#tab3,#tab4,#tab5").hide(); to $(".Tab").hide();

I think you could clean up the second part by simply following the above pattern.

Hope it helps!

Pardon me please, I don't think it will work as my tabs are numbered tab1, tab2, tab3, tab4 and tab5. Your code will display always tab5.(when

$("#tab" + (i)).show();

is used) Further when tab1 is to be displayed, tab2, tab3, tab4 and tab5 should hide and when tab2 is displayed, tab1, tab3, tab4, and tab5 should hide. Similarly when tab5 is displayed tab1 , tab2, tab3 and tab4 should hide and so on...
Hope you understand what I am trying to accomplish.

[hawk3st]

Have u tried my method?

Sent from my HTC Desire using Tapatalk

[singularity]

hawk3st, on 06 February 2011 - 03:50 PM, said:

Have u tried my method?

Sent from my HTC Desire using Tapatalk

I have tried what I have posted in my first post.

[hawk3st]

Ok?

Sent from my HTC Desire using Tapatalk

[singularity]

hawk3st, on 06 February 2011 - 03:50 PM, said:

Have u tried my method?

Sent from my HTC Desire using Tapatalk

oops i didn't read the post properly, I thought you were saying had you trying any method, so I replied i did what is in my first post.

I will have a go at your method , actually i needed to do it using loops, so i didn't consider it. Anyway thanks for the idea. It should work.

[singularity]

Jstall, on 06 February 2011 - 12:40 AM, said:

Hi,
Well I can't see using a loop but you could just use a couple functions. Something like :

function hide_tabs(num)
{
  $("#tab1,#tab2,#tab3,#tab4,#tab5").hide();
  $("#tab" + num).show();
}

function hide_cols(num)
{
  $("#coltable1,#coltable2,#coltable3,#coltable4,#coltable5").css("display","none");
  $("#coltable" + num).
}

Then call it like:

    $("#bstocks").click(function() {
       hide_tabs(5);
    });

That may be what you are looking for. It's a tad inefficient since it hides all elements then revels the one specified by the parameter, but there shouldn't be that much overhead from it and it may not be worth having to filter against the one element passed in, unless you have to.

I tried calling this function from the a tag, where my link is defined e-g:

<a href="#" class="myclass" id="one" onclick="hide_tabs('1')">My Text</a>
<a href="#" class="myclass" id="two" onclick="hide_tabs('2')">My Text</a>
<a href="#" class="myclass" id="three" onclick="hide_tabs('3')">My Text</a>
<a href="#" class="myclass" id="four" onclick="hide_tabs('4')">My Text</a>
<a href="#" class="myclass" id="five" onclick="hide_tabs('5')">My Text</a>

But it didn't work, Do I specifically need to call hide_tabs() like

    $("#bstocks").click(function() {
       hide_tabs(5);
    });

And then again I need to do it five times.

This post has been edited by singularity: 08 February 2011 - 10:05 PM

[hawk3st]

Try following it through on firebug, see if its actually calling the function.

Sent from my HTC Desire using Tapatalk

[Jstall]

Hi,

Just out of curiosity have you defined the two functions inside your document ready callback? If so you will need to move them out in order for them to be available to your onclick handlers of your links.

<script type = "text/javascript">
$(function(){
   document ready stuff

}); // end document ready

function hide_tabs(num){

}

function hide_cols(num){
}
</script>

This could help assuming that was the problem. Since there was not much info provided I just took a guess . Hope this helps.

[singularity]

Jstall, on 09 February 2011 - 03:49 PM, said:

Hi,

Just out of curiosity have you defined the two functions inside your document ready callback? If so you will need to move them out in order for them to be available to your onclick handlers of your links.

<script type = "text/javascript">
$(function(){
   document ready stuff

}); // end document ready

function hide_tabs(num){

}

function hide_cols(num){
}
</script>

This could help assuming that was the problem. Since there was not much info provided I just took a guess . Hope this helps.

I have just one function inside document.ready. Then I have ul li list with images inside a tags. I defined onclick event handler for img tags to call my function, but it doesn't work. But if I call the function from script tag where my jquery code resides it works. So is it wrong to put onclick for

img 

tag or

a

tag to call a function that is inside a jquery script block.

Thanks