JQuery Show Hide a specific Class from a list

I have the following piece of JQuery Code That shows a specific div when a specific Radio Button is Clicked.  However, How do I show a specific Div Class, from a list of Div Classes that all have the same name?  The Code is generated by Wordpress, So I can't change the Class Name.  So If I wanted to show the third (3) div "editfield" how would I do that?

<script type="text/javascript">
    $(document).ready(function(){
        $('input[type="radio"]').click(function(){
            if($(this).attr("value")=="Create new team"){
                $(".editfield").toggle();
            }
        });
    });
</script>

<label>
<input id="option_7" type="radio" value="Create new team" name="field_3">
Create new team
</label>

<div class="editfield"> 1 </div>
<div class="editfield"> 2 </div>
[b]<div class="editfield"> 3 </div>[/b]
<div class="editfield"> 4 </div>
<div class="editfield"> 5 </div>
<div class="editfield"> 6 </div>
<div class="editfield"> 7 </div>

Open in new window

LVL 7
rgranlundAsked:
Who is Participating?
 
Lukasz ChmielewskiConnect With a Mentor Commented:
You could use the nth selector:
http://api.jquery.com/nth-child-selector/
0
 
GaryCommented:
How do you determine to the show the third one?

Hardcoded example.
   $(document).ready(function(){
        $('input[type="radio"]').click(function(){
            if($(this).attr("value")=="Create new team"){
                $(".editfield:nth-of-type(3)").show();
            }
        });
    });


http://jsfiddle.net/GaryC123/LDLQ9/
0
 
rgranlundAuthor Commented:
@ALL
If I changed my script to the following, How do I "unhide a div class when I click on another radio button?

<script type="text/javascript">
    $(document).ready(function(){
        $('input[type="radio"]').click(function(){
            if($(this).attr("value")=="Create new team"){
                  $(".editfield:nth-of-type(3)").hide();
            }
        });
    });
</script>

Open in new window

0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
GaryCommented:
<script type="text/javascript">
    $(document).ready(function(){
        $('input[type="radio"]').click(function(){
           $(".editfield").show();
            if($(this).attr("value")=="Create new team"){
                  $(".editfield:nth-of-type(3)").hide();
            }
        });
    });
</script>

Open in new window



Not so sure if you are wanting to hide then show or show then hide - so maybe you need to swap the hide/show bits
0
 
Chris StanyonCommented:
You can also use the eq() method:

$(".editfield").eq(2);

It's zero based, so the first element is 0, the second is 1, the third is 2 etc.

If you want to pass in the value dynamically, there's a couple of ways of doing it. Here's an example using the data attribute:

<input type="radio" value="Value 1" name="myRadio" data-divtoshow='0' />
<input type="radio" value="Value 2" name="myRadio" data-divtoshow='1' />
<input type="radio" value="Value 3" name="myRadio" data-divtoshow='2' />
<input type="radio" value="Value 4" name="myRadio" data-divtoshow='3' />

$('input[type="radio"]').click(function(){
    $(".editfield").hide().eq($(this).data('divtoshow')).show();
});

Open in new window

http://jsfiddle.net/ChrisStanyon/6FZRA/
0
 
GaryCommented:
Can you explain why you have accepted this answer? When it certainly would not work with your code.
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.

All Courses

From novice to tech pro — start learning today.