CODEWITHSUNDEEP
jquery
t2nite
t2nite

Reputation: 83

Hide everything else, but

Here's the code: http://jsfiddle.net/t2nite/KCY8g/

What I'm trying to get the SHOW buttons below the HIDE/SHOW ALL button is if you press one button it will show it's text and hide the other texts.

I used this code, but as soon as I hit show on any button, it will show and hide itself.

$(".show").click(function() {
   $(this).parent().find("p").show(200);
   $("p").not(this).hide(200);
});​

Help.

Upvotes: 1

Views: 992

Answers (7)

Rene Koch
Rene Koch

Reputation: 1291

the mistake is the the parent "this" is the button, so $("p").not(this).hide(200); says all p's except your button, which is still all the p's.

$(".show").click(function() {
     var parent = $(this).parent();
     $(".itsawrap").not(parent).find('p').hide(200);
     parent.find('p').show(200);
});​

http://jsfiddle.net/renekoch/KCY8g/17/

Upvotes: 0

Reflective
Reflective

Reputation: 3917

One of the most short ways:

$(".show").click(function(e) {
    $("p").not($(this).parent().find("p").show(200)).hide(200);
});

jsfiddle

Upvotes: 0

Akram Berkawy
Akram Berkawy

Reputation: 5060

the problem is in this.

$(".show").click(function() {
    var p = $(this).parent().find("p");
    p.show(200);
    $("p").not(p).hide(200);
});​

Upvotes: 0

Udan
Udan

Reputation: 5609

Like this?

$("#btn").click(function() {
    var oneshow = false;
    $(".para2, .para3, .para4").each(function() {
        if ($(this).is(":visible")) {
            oneshow = true;
        }
    });
    if (oneshow == true) {
        $(".para2, .para3, .para4").hide(200);
    } else {
        $(".para2, .para3, .para4").show(200);
    }
});

$(".hide").click(function() {
    $(this).parent().find("p").hide(200);
});

$(".show").click(function() {
    var p = $(this).parent().find("p");
    $(p).show(200);
    $(parent).not(p).hide(200);
});​

Upvotes: 0

Musa
Musa

Reputation: 97672

Your problem was that this in the show function was not a <p> it was the button.

$(".show").click(function() {
    var $thisP = $(this).parent().find("p")
    $thisP.show(200);
    $("p").not($thisP).hide(200);
});​

http://jsfiddle.net/KCY8g/11/

Upvotes: 3

Mark Pieszak - Trilon.io
Mark Pieszak - Trilon.io

Reputation: 66981

jsFiddle Demo

Basically you want to hide all the 'itsawrap p' areas besides the current one.

$(".show").click(function() {
    var _p = $(this).parent().find('p');
    // maybe even do: $(this).closest('.itsawrap').find('p');
    // (if you ever think you'll wrap any of these things in other divs/etc

    _p.show(200);
    $('.itsawrap p').not(_p).hide();
});​

Upvotes: 2

jfriend00
jfriend00

Reputation: 707326

Change the show code to be this:

$(".show").click(function() {
    var container = $(this).closest(".itsawrap");
    $(".itsawrap").not(container).find("p").hide(200);
    container.find("p").show(200);
});​

Working demo here: http://jsfiddle.net/jfriend00/6ypRz/

This works at the container level so you can operate on the desired containers.

Upvotes: 1

Related Questions