0

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

Community
  • 1
  • 1
e.shell
  • 462
  • 1
  • 4
  • 14
  • "none" isn't a valid value for the visibility property. You'd want "hidden". That said, I'm not clear on your question. Why can't you just change the styles for `.group-dealer`? – isherwood Dec 10 '13 at 19:46
  • 1
    you want `visibility:hidden` Also you can make another function (say `toggleVisibility(obj)`) where `obj` is a jQuery object, and then the function body would be something like `obj.css({"visibility":"hidden"})` (along with logic to switch to `visible` when applicable) Then call `toggleVisibility(obj)` instead of `obj.toggle()` – Esaevian Dec 10 '13 at 19:48

3 Answers3

4

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*/
})
charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • ya, adding/removing a class and let CSS handles the design part +1 – A. Wolff Dec 10 '13 at 20:02
  • This works! I added the css as well. Thank you. I changed it to toggleClass to test, and on page load it does the inverse of what I want (the pop up shows right away) but the function works. I probably just have to play with the css or change is back to addClass. – e.shell Dec 10 '13 at 20:11
  • 1
    usually simplest to look at using css classes first...is easier to undo , especially if changing multiple display properties – charlietfl Dec 10 '13 at 20:13
0

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';
        });
    });
});
adeneo
  • 312,895
  • 29
  • 395
  • 388
  • I just replaced this line: jQuery(this).siblings('.group-dealer').toggle(); }); with what you stated, but it did not work. – e.shell Dec 10 '13 at 19:55
  • That's probably because that line also contains the closing of the click handler. – adeneo Dec 10 '13 at 20:05
0

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.

codingrose
  • 15,563
  • 11
  • 39
  • 58
  • several problems `is` will be true if any of the elements pass condition, and `:visible` selector will be true all the time also when `visibility` is used. See [:visible selector docs](http://api.jquery.com/visible-selector/) – charlietfl Dec 10 '13 at 19:55
  • 1
    you should fix your code, there are many errors in this answer – A. Wolff Dec 10 '13 at 20:01
  • @Hiral I tried your updated answer from right when you posted your comment, but still no success. – e.shell Dec 10 '13 at 20:05