INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

simple jQuery script that hides/shows paragraphs when respective button clicked ?

simple jQuery script that hides/shows paragraphs when respective button clicked ?

simple jQuery script that hides/shows paragraphs when respective button clicked ?

(OP)
hi folks - im using the W3 Schooles 'try it' editor - so i'd like you fire one of those up first and enter (copy/paste) the below code:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1..."></script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$('p').eq(0).toggle();

});
});
$(document).ready(function(){
$("#button2").click(function(){
$('p').eq(1).toggle();

});
});
$(document).ready(function(){
$("#button3").click(function(){
$('p').eq(2).toggle();

});
});
$(document).ready(function(){
$("#button4").click(function(){
$('p').eq(3).toggle();

});
});
$(document).ready(function(){
$("#button5").click(function(){
$('p').eq(4).toggle();

});
});
$(document).ready(function(){
$("#button6").click(function(){
$('p').eq(5).toggle();

});
});
</script>
</head>
<body>

<h2>Toggle the Fruits !</h2>
<p>This is Apple !</p>
<button id="button1">Hide Apple!</button>
<p>This is Orange! </p>
<button id="button2">Hide Orange!</button>
<p>This is Banana!</p>
<button id="button3">Hide Banana!</button>
<p>This is Lemon !</p>
<button id="button4">Hide Lemon!</button>
<p>This is Kiwi!</p>
<button id="button5">Hide Kiwi!</button>
<p>This is Pear!</p>
<button id="button6">Hide Pear!</button>

</body>
</html>


Im guessing you've understood what im doing here. When button 1 gets clicked , the paragraph reading 'This is Apple!' vanishes. But when you click button 1 again, it appears. So im using the 'toggle' action here nothing more, to achieve the 'show and hide' thing.

clearly ive taken the long winded approach so if you know a tidier shorter way to accomplish the above that would be great.

if i clicked the button called 'hide pear!' then the paragraph 'i am pear!' will hide, if i click it again it shows.


Q - when i click the button , the paragraph hides. at this point how can I make the buttons text change to 'show pear' ?

cos at the moment it stays as 'hide pear'.


this must apply for all paragraphs/fruits.

so clicking any button should change its text to 'show pear' or 'hide pear' depending on if its been clicked once already.

tips ?

RE: simple jQuery script that hides/shows paragraphs when respective button clicked ?

This is what I would do...

1. only use one 'document ready', you don't wrap each command in in.
2. give the paragraphs something to identify them
3. use the data attribute (HTML5) on the button
4. use the event object to determine what to toggle
5. use the event to alter the text

HTML

CODE

<h2>Toggle the Fruits !</h2>
 <p id="p1">This is Apple !</p>
 <button data-id="p1">Hide Apple!</button> 
 <p id="p2">This is Orange! </p>
 <button data-id="p2">Hide Orange!</button> 
JS

CODE

<script type="text/javascript">
$(document).ready(function(){
    $('button').on('click',function(){
        $('#'+$(this).attr('data-id')).toggle();
        if($('#'+$(this).attr('data-id')).is(':visible'))
        {
            $(this).html($(this).html().replace('Show','Hide'));
        }
        else
        {
            $(this).html($(this).html().replace('Hide','Show'));   
        }
    });                 
 });
</script> 

It's not fantastic but it will do what you want!



"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

RE: simple jQuery script that hides/shows paragraphs when respective button clicked ?

Also as a thought, if you want to make it completely generic without the need for using HTML5 data attributes or assigning id's to the paragraphs... simply wrap each paragraph and button with a parent...

HTML

CODE

<h2>Toggle the Fruits !</h2>
 <div>
    <p>This is Apple !</p>
    <button>Hide Apple!</button> 
 </div>
 <div>    
    <p>This is Orange! </p>
    <button>Hide Orange!</button>  
 </div> 

JS

CODE

<script type="text/javascript">
$(document).ready(function(){
    $('button').on('click',function(){
        $(this).parent().find('> p').toggle();
        if( $(this).parent().find('> p').is(":visible"))
        {
            $(this).html($(this).html().replace('Show','Hide'));
        }
        else
        {
            $(this).html($(this).html().replace('Hide','Show'));   
        }
    });                 
 });
</script> 

It also doesn't have to be a div it can be a span or other encapsulating parent tag.

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

RE: simple jQuery script that hides/shows paragraphs when respective button clicked ?

dang I mean 'section' not 'span' , ok it'll work with a span but it wouldn't be valid mark-up as you don't put a block element inside an inline element like that!

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close