CODEWITHSUNDEEP
javascriptjqueryhtmlcssvisibility
Dev pro
Dev pro

Reputation: 630

How to Hide HTML list with jQuery and rise the following inputs?

HI guys this is my Html code :

<ul id="var_language_short">
    <li id="languages_more"><label class="form_present_trigger">More</label></li>
</ul>
<div id="language_checkbox" class="popup_fullscreen">
    <div class="popup_fullscreen_close">close</div>
    <ul id="var_language_long">
    </ul>
</div>
<div class="form_present_row">
    <span class="form_present_title">
        <label class="form_present_title_label" for="var_prixPlat">Prix moyen 
                d'un plat<span class="req" title="Required">*</span></label>
    </span>
    <div class="form_present_content">
        <span class="form_present_update">
            <input class="form_present_input var_prixPlat" type="text" id="var_prixPlat" />
        </span>
    </div>
</div>

...

jquery code:

var list_Tyepe_Restaurant = document.getElementById('iType')
                            .contentWindow.document.body.innerHTML;
$("#var_language_long").html(list_Tyepe_Restaurant);    
$("#languages_more").click(function (e) {
    $("#language_checkbox").css("visibility", "visible");
    $("#language_checkbox").css("opacity", "1");
});
$(".popup_fullscreen_close").click(function (e) {
    $("#language_checkbox").css("opacity", "0");
    $("#language_checkbox").css("visibility", "hidden");
});

I can show and hide this list but The problem is that when i hide it there is a blank space and the following inputs don't rise. Pleade help

Upvotes: 2

Views: 84

Answers (4)

vinayakj
vinayakj

Reputation: 5681

Use .hide() not visibilty. hide removes space taken but visibilty doesnt.

$("#languages_more").click(function (e) {
       $("#language_checkbox").show()
});
$(".popup_fullscreen_close").click(function (e) {
       $("#language_checkbox").hide();
});

For some reason you want to use visibilty then set height to 0

$("#languages_more").click(function (e) {
      $("#language_checkbox").css({"visibility" :"visible","height":"auto","opacity":"1"});
});
$(".popup_fullscreen_close").click(function (e) {
      $("#language_checkbox").css({"visibility" :"hidden", "height":"0","opacity":"0"});
});

Upvotes: 2

Vinod Murukesan
Vinod Murukesan

Reputation: 231

As per visibility:hidden; it will hide the selector, but will retain the space, if you want to get rid of the space also then you have to use display:none; to hide and display:block; to show.

I have updated the code with few options

$("#languages_more").on('click', function () {
    $("#language_checkbox").show();
});

$(".popup_fullscreen_close").on('click', function () {
    $("#language_checkbox").hide();
});

or for better animation stuff you can use

$("#languages_more").on('click', function () {
    $("#language_checkbox").fadeIn();
});

$(".popup_fullscreen_close").on('click', function () {
    $("#language_checkbox").fadeOut();
});

or 

$("#languages_more").on('click', function () {
    $("#language_checkbox").slideDown();
});

$(".popup_fullscreen_close").on('click', function () {
    $("#language_checkbox").slideUp();
});

Upvotes: 1

jrath
jrath

Reputation: 990

instead of $("#language_checkbox").css("visibility", "visible");

use

$("#language_checkbox").show();

And instead of $("#language_checkbox").css("visibility", "hidden");

use

$("#language_checkbox").hide()

Upvotes: 2

3pic
3pic

Reputation: 1219

Dont use visibility, it does not rise/unrise.

Use display

Or even easier, use show() and hide()

var list_Tyepe_Restaurant = document.getElementById('iType').contentWindow.document.body.innerHTML;
 $("#var_language_long").html(list_Tyepe_Restaurant);    
$("#languages_more").click(function (e) {
                    $("#language_checkbox").show();
                });
$(".popup_fullscreen_close").click(function (e) {
                    $("#language_checkbox").hide();
                });

FYI .hide() is equivalent to .css('display', 'none');

Upvotes: 3

Related Questions