CODEWITHSUNDEEP
javascriptjquery
Weinz
Weinz

Reputation: 406

.show elements and .hide elements

I've got this problem :

I want when i click one "outer" div hide all outer div's and show me the next div content.

This is the function. Wich it works there http://jsfiddle.net/Weinz/jdFRw/4/

But on test site only hide .outerDiv doesn't show next .innerDiv

$(function() {
    $(".outerDiv").click(function() {
        $(".outerDiv").hide();
        $(".innerDiv").hide();
        $(this).next("div").show();
    });
    $(".innerDiv").click(function() {
        $(".outerDiv").show();
        $(".innerDiv").hide();
    });
});

The real html code is this 

<div class="block outerDiv"><a href="#"><img src="images/placeholder.jpg" width="165" height="74" alt="Temp" /></a></div>
     <div class="container innerDiv" style="display:none;">

I think the problem is on .next but i try diferent options and nothing work.

If i don't set the display in the innerDiv it works...

Upvotes: 0

Views: 92

Answers (1)

Kale McNaney
Kale McNaney

Reputation: 457

Try this

$(function() {
$(".outerDiv").click(function() {
    $(".outerDiv").hide();
    $(".innerDiv").hide();
    $(this).next("div").show().css('display', 'block');
});
$(".innerDiv").click(function() {
    $(".outerDiv").show();
    $(".innerDiv").hide();
});

});

Upvotes: 1

Related Questions