Change Toggle(); from Display:none to Visibility:hidden

Question

This code is working successfully on the project that I am working on. The problem with this is that the elements that this code affects are positioned absolutely. When .field-name-field-pin-point it clicked the element .group dealer is hidden, but the .field-name-field-pin-point moves off of the page. Ideally, I would like the visibility to be set at none upon page load, but it would probably be easier to do that part in CSS. Here is what I am currently using:

jQuery(document).ready(function () {
        jQuery('.node-202 .field-name-field-pin-point').click(function() {
        jQuery(this).siblings('.group-dealer').toggle();
    });

});

There will be more nodes that will be positioned differently so the full class name I provided is necessary. The markup (generally speaking) is as follows:

<div class="node-202">
    <div class="group-dealer">...</div>
    <div class="field-name-field-pin-point">...</div>
</div>

I am basically creating points on a map that when clicked, bring up a small window with more information about that location.

Here is a reference to my last post if you are looking for more information: Toggle Class Visibility by Clicking on another Class

Answer 1

I suggest your best approach is to add a css rule and just toggle a class on the elements

CSS

.group-dealer.hidden{ visibility:hidden}

JS

jQuery('.node-202 .field-name-field-pin-point').click(function() {
        jQuery(this).siblings('.group-dealer').addClass('hidden');/* use toggleClass if more appropriate*/
})

Answer 2

Just toggle the visibility then

jQuery(document).ready(function () {
    jQuery('.node-202 .field-name-field-pin-point').click(function() {
        jQuery(this).siblings('.group-dealer').css('visibility', function(_,vis) {
            return vis == 'hidden' ? 'visible' : 'hidden';
        });
    });
});

Answer 3

Try:

$('.node-202 .field-name-field-pin-point').click(function () {
    if ($(this).siblings().css('visibility') == 'visible') {
        $(this).siblings().css('visibility', 'hidden');
    } else {
        $(this).siblings().css('visibility', 'visible');
    }
});

DEMO here.