Javascript : difficulties when making a hidden element visible

212
November 26, 2016, at 9:12 PM

I have some problems with css manipulation with jQuery. Here is what I need to do. I have these three picture. Each are a representation of a person.

When we click on one of those, this div appears:

The problem is when I close it, the website should become as in the first picture, but the 3 picture don't reappear with $("class").css("visibility", "visible"). I don't know why.

The code (there is some PHP, it's done with Wordpress) : Here is the code for the first picture (I will keep it short, it's not relevant) :

 <div class="team-member" style="position:relative; visibility:visible; z-index:-200;"data-style="'.$team_memeber_style.'">
 <img class="img_avocat" alt="'.$name.'" src="' . $image_url .'" title="' . $name . '" /></div>

Here is the code for the second picture :

$html .= '<div class="team-member-container" style="position:relative;z-index:-200">';
$html .= '<div class="avocat_container ' .$i. '"  height="400px" style="width:1250px; height:442px;border:2px solid black;z-index:200;position:absolute;top:-5%;">
<div style="width:400px; display:inline; position:relative; z-index:200" class="photo_container"><img class="img_avocat_cont" style="display:inline; padding-top:23px" width="400px" height="200px" alt="'.$name.'" src="' . $image_url .'" title="' . $name . '" /></div>
<div style="display:inline-block; vertical-align:top;z-index:200; margin-left: 50px;position:relative;padding-top:23px;" class="container_description">
<h3 style="display:block;z-index:200; color:#f5a982;position:relative;">' . $name . '</h3>
<p style="display:block;z-index:200;position:relative;">' . $job_position . '</p>
<p style="display:block;z-index:200;position:relative;">DESCRIPTION</p>
<h4 style="display:block;z-index:200; color:#f18c58;position:relative;">FORMATION</h4>
<h4 style="display:block;z-index:200; color:#f18c58;position:relative;">Expertise</h4>
</div>
<div style="display:inline;" class="avocat_close"><img style="display:inline;float: right;padding-top: 20px; padding-right:20px;" src="http://scmlibravocats.lagencecocoa.com/wp-content/uploads/2015/11/croix_fermeture.png" /></div>
<div style="display:inline; margin-left:28%;" class="avocat_mail"><img style="display:inline;padding-right:10px;"src="http://scmlibravocats.lagencecocoa.com/wp-content/uploads/2015/11/mail.png" />Envoyer un message</div>

';

$html .= '<div class="testo team-member" style="position:relative; visibility:visible; z-index:-200;"data-style="'.$team_memeber_style.'">';

The Jquery code :

$(".avocat_container").hide();
var on = 0;
$(".team-member-container").click(function () {
    if (on == 0) {
        $(this).find(".avocat_container").fadeIn("slow");
        $(".team-member").css("visibility", "hidden");
        on = 1;
    }
});
$(".photo_container").click(function() {
    $(".avocat_container").fadeOut("slow");
    $(".avocat_container").css("visibility", "hidden");
            $(".testo").fadeIn("slow");
    $(".team-member").style.visibility = "visible";
    on = 0;
});
});
Answer 1

I would actually use min-height for this, and you'd also get a nice slide-down transition. Basic idea is to set your 2nd div to min-height:0;, then in JQuery use a click event on the other div to increase min-height. If you keep the z-index of the 2nd div higher than the first, it will appear overtop of it. To close it, attach a click event that resets min-height:0;. Add transition:min-height .4s ease; to your 2nd div and you've got a nice little effect!

Answer 2

This is because when you get elements by '$', it will return a jQuery object (an array-like object) even if there is only one element compatible with the condition, you can use console.log($(".team-member")) to see what you have.

In this case, just modify

$(".team-member").style.visibility = "visible";
to
$(".team-member").css("visibility", "visible");
or
$(".team-member")[0].style.visibility = "visible";

Answer 3

I tried with z-index i also tried all of your solution Rex, but nothing works. I really don't know why perhaps it' in the structure of my html code. I took a picture of it :

avocat_container is the div that appear when we click on a photo. And team-member is the one that disappear to make avocat_container appear.

EDIT : It's like the ".team-member".css("visibility", "visible") is not take into account in the javascript.

READ ALSO
get variable to url and navigate variable selected

get variable to url and navigate variable selected

can some one help me with my code

189
Twitter boot strap side nav

Twitter boot strap side nav

Can someone please assist me in figuring out how to turn this code snippet of a bootstrap side-bar to a normal top nav when the media queries kick in for mobile devices, the nav needs to be static at the top as wellThe side-bar is inside a container that moves margin-left:...

189
Twitter Bootstrap: Getting the index of an open tab

Twitter Bootstrap: Getting the index of an open tab

I'm trying to get the index of a tab when it opens in Twitter Bootstrap (33), but it keeps giving me an index of 0

295
Getting php data from jQuery ajax without html forms

Getting php data from jQuery ajax without html forms

My idea is to write single page web application using jQuery and having server side in php, I want to do it without using html formsSo far I have this new

242