Jquery adding second class if it is missing with class selector

Question

I have a site I am working on. When you click on am image it opens info about a person in a div. I am doing so by using toggleClass in jquery UI. I need to close any open div when another gets clicked. i thought I could use a :not selector like this;

        $('.teamMember').click(
        function(){
            $('.teamMemberContent:not.teamInactive').addClass('.teamInactive');
            var teamMemberID = $(this).attr('data-teamMember');
            $('#'+teamMemberID).toggleClass('teamInactive');
        });

But I don't think I am using :not correctly here. Any guidance would be appreciated.

Here is my HTML;

                    <div class="teamWrapper">
            <div id="teamHeader">
                <h1>Meet Our Team</h1>
            </div>
            <div class="teamMember" data-teamMember="teamDavidContent">
                <div class="teamImageWrapper">
                    <img src="images/team/dave.jpg">
                </div>
                <div class="teamMemberName">
                    <h3>Name</h3>
                    <h3>Big Shot</h3>
                </div>
            </div>
            <div class="teamMember" data-teamMember="teamLauraContent">
                <div class="teamImageWrapper">
                    <img src="images/team/laura.jpg">
                </div>
                <div class="teamMemberName">
                    <h3>Name 1.5</h3>
                    <h3>Sub Boss</h3>
                </div>
            </div>
            <div class="teamMember" data-teamMember="teamAudraContent">
                <div class="teamImageWrapper">
                    <img src="images/team/audra.jpg">
                </div>
                <div class="teamMemberName">
                    <h3>Name 2 </h3>
                    <h3>Underling 1</h3>
                </div>
            </div>
            <div class="teamMemberContent teamInactive" id="teamDavidContent">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in suscipit lacus. Nam nec purus vitae odio placerat volutpat. In tempor arcu ut ante gravida pretium. Quisque id convallis orci. Ut sit amet vehicula eros. Nam sit amet dui eleifend, vestibulum ipsum eu, tempor nisl. Quisque aliquet, tellus et vehicula luctus, justo mi convallis leo, ut ornare tortor ex id nulla. Duis nec tempor arcu. Sed odio mi, gravida in sem et, cursus pretium neque.</p>
                <p>Sed dolor turpis, pharetra sit amet tortor nec, auctor porta purus. Duis imperdiet quam egestas eros dictum lobortis. Cras aliquam venenatis neque in convallis. Ut in metus ut nibh tristique semper. Donec posuere elementum egestas. Suspendisse vestibulum semper dolor id elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="teamMemberContent teamInactive" id="teamLauraContent">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in suscipit lacus. Nam nec purus vitae odio placerat volutpat. In tempor arcu ut ante gravida pretium. Quisque id convallis orci. Ut sit amet vehicula eros. Nam sit amet dui eleifend, vestibulum ipsum eu, tempor nisl. Quisque aliquet, tellus et vehicula luctus, justo mi convallis leo, ut ornare tortor ex id nulla. Duis nec tempor arcu. Sed odio mi, gravida in sem et, cursus pretium neque.</p>
                <p>Sed dolor turpis, pharetra sit amet tortor nec, auctor porta purus. Duis imperdiet quam egestas eros dictum lobortis. Cras aliquam venenatis neque in convallis. Ut in metus ut nibh tristique semper. Donec posuere elementum egestas. Suspendisse vestibulum semper dolor id elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="teamMemberContent teamInactive" id="teamAudraContent">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in suscipit lacus. Nam nec purus vitae odio placerat volutpat. In tempor arcu ut ante gravida pretium. Quisque id convallis orci. Ut sit amet vehicula eros. Nam sit amet dui eleifend, vestibulum ipsum eu, tempor nisl. Quisque aliquet, tellus et vehicula luctus, justo mi convallis leo, ut ornare tortor ex id nulla. Duis nec tempor arcu. Sed odio mi, gravida in sem et, cursus pretium neque.</p>
                <p>Sed dolor turpis, pharetra sit amet tortor nec, auctor porta purus. Duis imperdiet quam egestas eros dictum lobortis. Cras aliquam venenatis neque in convallis. Ut in metus ut nibh tristique semper. Donec posuere elementum egestas. Suspendisse vestibulum semper dolor id elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>

Here is my css;

            .teamWrapper{
                position: relative;
                font-family: 'Alegreya Sans', sans-serif;
                color: #999999;
            }
            #teamHeader{
                text-align: center;
            }
            #teamHeader h1{
                font-weight: normal;
                font-size: 2.5em;
                margin: 1.4em;
            }
            .teamMember{
                width:33.3%;
                position: relative;
                float:left;
                color:#999999;
            }
            .teamMember:hover{
                cursor: pointer;
                color:#282828;
            }
            .teamImageWrapper{
                padding:3em;
                padding-top: 0px;
                padding-bottom:0px;
            }
            .teamMemberName{
                text-align: center;
            }
            .teamMember h3{
                margin:.2em;
            }
            .teamMemberContent{
                display:block;
                width:100%;
            }
            .teamInactive{
                display:none;
            }

and a link to a jsfiddle

Any help is greatly appreciated!

Answer 1

Instead of finding out which one is not, you can simply use the one that is and find its siblings using .siblings(). Then add the class .teamInactive

$('#'+teamMemberID).toggleClass('teamInactive').siblings(".teamMemberContent").addClass('teamInactive');

FIDDLE

Answer 2

I think you could just reference the "teamMember" class and add the "teamInactive" class to all

$('.teamMember').click(
    function(){
        $('.teamMember').addClass('.teamInactive');
        var teamMemberID = $(this).attr('data-teamMember');
        $('#'+teamMemberID).toggleClass('teamInactive');
    });

That should hide every div, and then only enable the one you want

Answer 3

This is proper CSS selector: .teamMemberContent:not(.teamInactive). Please try with it. Also, you shouldn't use dot in addClass method:

$('.teamMemberContent:not(.teamInactive)').addClass('teamInactive');