Solved

JQuery Show Hide a specific Class from a list

Posted on 2014-01-22
6
521 Views
Last Modified: 2014-02-01
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

0
Comment
Question by:rgranlund
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39800785
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
 
LVL 27

Accepted Solution

by:
Lukasz Chmielewski earned 500 total points
ID: 39800794
You could use the nth selector:
http://api.jquery.com/nth-child-selector/
0
 
LVL 7

Author Comment

by:rgranlund
ID: 39800836
@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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 58

Expert Comment

by:Gary
ID: 39800846
<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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39801679
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
 
LVL 58

Expert Comment

by:Gary
ID: 39826905
Can you explain why you have accepted this answer? When it certainly would not work with your code.
0

Featured Post

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Could you point whyat's needed to a Codeigniter app to correctly be started? 10 61
asp.net mvc5 6 33
How do I add date to text file name 15 28
sitemap.xml 3 28
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
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)

732 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