Trying to add/remove class on toggle button

[jtrinker]

I have a bunch of div buttons and when each individual one is clicked a corresponding hidden div toggles into view underneath. Pretty standard stuff, looks just like this –http://www.mkyong.com/jquery/jquery-toggle-example-to-display-and-hide-content/ — only I’m using a clickable div instead of a button.

Anyway, when you click the div an active class is added changing its background color, and when you click again to close the toggled div the active class is removed.

My js code looks like this:

Ew.TestimonialsView = Ember.View.extend({
    didInsertElement: function() {
        $('.hidden-content').hide();
      $('.toggle-bar, .about-sidebar-item').click(function (ev) {
        var t = ev.target
        $(this).toggleClass('active-bg');
        $('#info' + $(this).attr('target')).toggle(500);

         return false;
      });
    }
});

But I also have a sidebar that has links which also open and close each corresponding div. So I essentially have two different buttons that toggle the same hidden div.

I would like to have the links in the sidebar to also add and remove the active class on the primary div toggle button, but I’m having issues. If the main div is clicked, changing the background color by adding the active class, I would like the user to be able to close the toggled div with the link on the sidebar and that link also remove the active class on the main button.

Here is my html:

<div class="toggle-container">
    <div class="toggle-bar" target="1">
        <h4 class="condition-text">Spinal Dysfunction</h4>
    </div><!-- toggle-box -->
        <div class="hidden-content" id="info1">
            <p>EW Motion Therapists (physical therapists) are highly skilled in the evaluation and treatment of spinal dysfunction. Dysfunctions of the spine may be of discogenic, facet, myofascial, joint, radicular, or the result of muscle imbalance in their origin.</p>
            <p>Common spinal diagnoses include: neck pain, lower back pain, lumbar pain, cervical, thoracic, or lumbar facet dysfunction, lumbopelvic dysfunction / pain, sacroiliac (SI) dysfunction, sciatica, pirifomis syndrome, radiculopathy, herniated nucleus pulposis (HNP), degenerative disc disease (DDD), spinal stenosis, and spondylolisthesis.</p>
            <p>EW Motion Therapy physical therapists utilize a medically based, whole body system - IMAP (Integrated Motion-Activation-Performance) to evaluate, treat, and prevent movement dysfunction. The IMAP system is designed to improve a client's mobility, address his or her movement dysfunction, eliminate pain when present, and to improve performance. Our programs are designed to optimize a client's mobility, so whatever they do, they can do it better.</p>
        </div><!-- hidden-content -->
</div><!-- toggle-container -->

And here is my sidebar:

<div class="sidebar-container">
<h3 class="sidebar-header">testimonials</h3>
    <ul>
        <li class="about-sidebar-item"><a class="toggle-bar" target="1">EW PT</a></li>
        <li class="about-sidebar-item"><a class="toggle-bar" target="2">EW BODY</a></li>
        <li class="about-sidebar-item"><a class="toggle-bar" target="3">EW RUN</a></li>
        <li class="about-sidebar-item"><a class="toggle-bar" target="4">EW FIT</a></li>
        <li class="about-sidebar-item"><a class="toggle-bar" target="5">EW TEAM</a></li>
        <li class="about-sidebar-item"><a class="toggle-bar" target="6">EW WORKPLACE</a></li>
    </ul>

Thanks so much.

[Author]

Posts