CODEWITHSUNDEEP
jquerytoggleshow-hide
Federico Giust
Federico Giust

Reputation: 1793

How can I Hide/Show a span when all of them have the same class?

I have this HTML code:

<p>Hello <span class="hide" style="display:none">there</span> jquery</p>
<button class="toggle">Toggle</button>
<p>Hello <span class="hide" style="display:none">You</span> jquery</p>
<button class="toggle">Toggle</button>

With this jQuery:

$('.toggle').toggle(
    function() {
        $('.hide').show("slow");},
    function() {    
        $('.hide').hide("slow");}
);

Now, as you can see both buttons have the same class, and both span have the same class. What I'm trying to achieve here is that when I press one of them it should hide/show the span above it.

I've got it running the way it is now on this jsFiddle

Any ideas?

Thanks in advance

Federico

Upvotes: 0

Views: 11999

Answers (5)

Federico Giust
Federico Giust

Reputation: 1793

Thanks everybody for the answers, I just found another way that was much better for what I needed! :)

This is the code I found it might be helpful for someone else.

// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// Latest version @ http://andylangton.co.uk/jquery-show-hide

// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {

// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='Show';
var hideText='Hide';

// initialise the visibility check
var is_visible = false;

// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append(' (<a href="#" class="toggleLink">'+showText+'</a>)');

// hide all of the elements with a class of 'toggle'
$('.toggle').hide();

// capture clicks on the toggle links
$('a.toggleLink').click(function() {

// switch visibility
is_visible = !is_visible;

// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);

// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');

// return false so any link destination is not followed
return false;

});
});

Then simply use an HTML in this form

<a href="#" class="toggleLink">Toggle</a>
<span class="toggle" >there</span>
<a href="#" class="toggleLink">Toggle</a>
<span class="toggle" >You</span>

Adding class toggle to any span, div or tag you want to hide/show and add class toggleLink to the parent element

You can see it working on here jsFiddle

Or in the author's website

Upvotes: 0

Marc B
Marc B

Reputation: 360592

Perhaps

$('button.toggle').click(function() {
    $(this).prev('span').toggle();
});

Upvotes: 2

James
James

Reputation: 3239

$('.toggle').toggle(
    function() {
        $(this).prev().show('slow');
    },
    function() {
        $(this).prev().hide('slow');
    }
);

Upvotes: 0

red-X
red-X

Reputation: 5128

This should do the trick:

$('.toggle').toggle(
    function() {
        $(this).prev().find('.hide').show("slow");},
    function() {    
        $(this).prev().find('.hide').hide("slow");}
);

Upvotes: 2

Tim
Tim

Reputation: 14446

Set the id attribute of the span to a unique value, then use $('#thatid') to reference it (replacing thatid with the ID you set).

Upvotes: 0

Related Questions