0

I am working on a project and I need to be able to click .node-202 .field-name-field-pin-point and toggle the visibility of .node-202 .group-dealer.

I need both identifiers in the call because there will be multiple nodes, and I do not want all of them opening when I click on one of the pin points.

Edit: Here is an example of the HTML. I am using Drupal so there is a lot of unnecessary code, but it did my best to format it as quickly as I could.

            <article class="node-202 node node-dealer node-teaser contextual-links-region node-by-viewer clearfix">

            <div class="field-group-format field-group-div group-dealer collapsible  speed-fast effect-none"><!-- Begin Class Group Dealer -->
            <h3><span class="field-group-format-toggler">Dealer Container</span></h3>
                            <div class="field-group-format-wrapper" style="display: block;">
                                <div class="field field-name-field-dealer-image field-type-image field-label-hidden"><div class="field-items">
                                <div class="field-item even"><img src="image.jpg" width="280" height="114" alt="" />
                            </div>
                        </div>
                    </div>
            <div class="field field-name-field-dealer-website field-type-link-field field-label-hidden">
            <div class="field-items">
            <div class="field-item even">
            <a href="@" target="_blank">Company Titile</a>
                                </div>
                            </div>
                        </div>
                                    <div class="field field-name-field-dealer-address field-type-text field-label-hidden">
                                    <div class="field-items"><div class="field-item even">81234 Ricardo Court
                                </div>
                            </div>
                        </div>
                                    <div class="field field-name-field-dealer-location field-type-text field-label-hidden">
                                    <div class="field-items"><div class="field-item even">Los Angeles, CA 
                                </div>
                            </div>
                        </div>
                                    <div class="field field-name-field-dealer-country field-type-text field-label-hidden">
                                    <div class="field-items"><div class="field-item even">United States
                                </div>
                            </div>
                        </div>
                                <div class="field field-name-field-dealer-phone-number field-type-text field-label-hidden">
                                <div class="field-items"><div class="field-item even">123-555-2042
                            </div>
                        </div>
                    </div>
                    <div class="field field-name-field-dealer-email field-type-email field-label-hidden">
                        <div class="field-items">
                            <div class="field-item even">
                                <a href="mailto:sales@company.com">sales@company.com</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>  <!-- END CLASS GROUP DEALER -->
            <div class="field field-name-field-pin-point field-type-image field-label-hidden">
                <div class="field-items"><div class="field-item even">
                    <img src="image.png" width="24" height="23" alt="" />
                    </div>
                </div>
            </div>

            </article>

Edit 2: I need to set ".node-202 .group-dealer" to visibility:hidden rather than display:none. It seems that this may be helpful: Equivalent of jQuery .hide() to set visibility: hidden.

Community
  • 1
  • 1
e.shell
  • 462
  • 1
  • 4
  • 14

2 Answers2

2

Assuming that the HTML structure looks like this (and that you have multiple instances of this structure, so you can't just use the class names):

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

you need something like this:

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

TEST IN JSFIDDLE

Moshe Katz
  • 15,992
  • 7
  • 69
  • 116
  • You are correct about the html structure. I just added the markup in the original post. I am using Drupal so it is a little messy. Unfortunately, I tested what you posted here without success. – e.shell Dec 10 '13 at 18:01
  • @e.shell I had two small mistakes in the code. I updated it and added a JSFiddle test. – Moshe Katz Dec 10 '13 at 18:07
  • @Mosge Actually, It seems like I need to set the group to visibility:hidden rather than display:none. The elements are positioned absolutely, so when the group is set to display:none, the pinpoint is moved off screen. The sounds odd I know haha. I am basically positioning points on a map, that have pop-ups with more information about that location. – e.shell Dec 10 '13 at 18:14
1

Try this.. 

 $('.node-202 .field-name-field-pin-point').bind('click', function(){

            $('.node-202 .group-dealer').toggle();

    })

FIDDLE DEMO

Prasanth K C
  • 7,073
  • 5
  • 39
  • 62
  • Unfortunately this toggles both of the elements. Once I click on the element containing .field-name-field-pin-point, all of node-202 is no longer displayed. – e.shell Dec 10 '13 at 17:58
  • @e.shell have you checked my fiddle, it will not remove the whole '.node-202' – Prasanth K C Dec 10 '13 at 18:04
  • Ah hah! You are correct. I have the element positioned absolutely so it was hidden once it was clicked. This seems to be the solution that I need! – e.shell Dec 10 '13 at 18:10
  • Actually, It seems like I need to set the group to visibility:hidden rather than display:none. The elements are positioned absolutely, so when the group is set to display:none, the pinpoint is moved off screen. It sounds odd, but I am basically positioning points on a map, that have pop-ups with more information about that location. – e.shell Dec 10 '13 at 18:20