/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] pass dynamic div id to jquery

Copy linkTweet thisAlerts:
Sep 27.2011

Hi All,

I am trying to pass the dynamic div id to the jquery onclick function.

Here is the html code

[code=html]<div id = “show1″ class=”test”>Click 1</div>
<div id = “show2″ class=”test”>Click 2</div>[/code]

[CODE]<script>
$(document).ready(function(){
$(“.test”).click(function(){
$(“#show1”).slideToggle(“slow”);
});
</script>[/CODE]

So it works for the first div not for the second one.There is something called “closest” id selector in jquery but not sure.

Please suggest me….Thanks in advance.

Raj

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@DanInMASep 27.2011 — what are you actually trying to do? what you describe would hide the div you just clicked on and you wont be able to see ti again. perhaps give us some more detail about your final goal here instead.
Copy linkTweet thisAlerts:
@DanInMASep 27.2011 — btw, the technical answer to what you are currently trying to do :

[CODE]<script>
$(document).ready(function(){
$(".test").click(function(){
$(this).slideToggle("slow");
});
</script>[/CODE]
Copy linkTweet thisAlerts:
@raj_2006authorSep 27.2011 — Hi,

Thanks for your suggestion.The thing is the div will togle onclick a link.It's working fine when it's only one div id.

Now if there is more than one div ids then I can't write something like
[CODE]
 $(".test").click(function(){
$("#show1").slideToggle("slow");
});
$(".test").click(function(){
$("#show2").slideToggle("slow");
});[/CODE]
..............................

till 20 div ids.

So what I am trying to to get the closest div id if the class test is clicked.But I am not sure if this is the best way to get the dynamic div ids as class test has numbers of different div ids(Please see my html).

Hope it clears.

Thanks,

Raj
Copy linkTweet thisAlerts:
@DanInMASep 27.2011 — ok , $(".test") = ANY DIV with a class of test and you have given all of your show divs a class of test, therefore if you click on ANY OF THESE divs, the function will fire.

now if you fixed your HMTL, perhaps like so:

[code=html]
<a href="#" class="test">Show next</a>
<div id = "show1">Click 1</div>
<a href="#" class="test">Show next</a>
<div id = "show2">Click 2</div>
[/code]

then you could do this:

[CODE]
 $("a.test").click(function(e){
e.preventDefault();
$(this).next("div").slideToggle("slow");
});

[/CODE]

so clicking any anchor link with a class of test will find and toggle the next DIV it finds.
Copy linkTweet thisAlerts:
@DanInMASep 27.2011 — so just to clarify, your current suggestions means that anytime you click on any element with a class of test , these functions will allllllll fire becuase you have a class fo test on all of the elements you want to toggle in the first place.
Copy linkTweet thisAlerts:
@raj_2006authorSep 27.2011 — Excellent...Let me try and will get back to you with the output.

Thanks.. ?
Copy linkTweet thisAlerts:
@raj_2006authorOct 30.2011 — Hi Dan,

Sorry for being late.

Finally I managed to make it working but slightly different.

[CODE]
<script>
$(document).ready(function(){

$(".pusher").click(function(){
var divname= this.id;
var myClass = $(this).attr("class");
$("#divs"+divname).slideToggle("slow");
$(this).text($(this).text() == 'Click here to fill up details' ? 'Send Details Later' : 'Click here to fill up details');
return false;

});

});
</script> [/CODE]

[code=html]<div id="1" class="pusher">Click here to fill up details</div>
<div id="divs1" style="display: none;">Test 1</div>

<div id="2" class="pusher">Click here to fill up details</div>
<div id="divs2" style="display: none;">Test 2</div>[/code]

Thanks a bunch ?

Raj
×

Success!

Help @raj_2006 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...