Jquery only allow one toggle div to be open at a time

Question

I have 3 image icons that trigger a div to be revealed on click. Jquery not being my native language I have hit a stuck. Is there a way to only allow one div to be shown at a time? Below is my code I have thus far. I have dug around the internet but haven't come across a situation like mine. Any help is appreciated.

        <div class="row">
            <div id="callout-icons" class="large-12 large-centered columns" data-equalizer="cta">
                <div class="medium-4 small-4 columns overlay-parent container" data-equalizer-watch="cta">
                    <span class="overlay-support">Support</span>
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/images/Support_v2.png" class="image" />
                     <div class="overlay">
                        <div class="text show-support">Make a Gift</div>
                     </div>
                </div>
                <div class="medium-4 small-4 columns overlay-parent container" data-equalizer-watch="cta">
                    <span class="overlay-news">News</span>
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/images/news.png" class="image" />
                     <div class="overlay">
                        <div class="text show-news">UW News</div>
                     </div>
                </div>  
                <div class="medium-4 small-4 columns overlay-parent container" data-equalizer-watch="cta">
                    <span class="overlay-inspire">Inspire</span>
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/images/inspire.png" class="image" />
                     <div class="overlay">
                        <div class="text show-inspire">Student Finance Clubs</div>
                     </div>
                </div>
            </div>  
        </div>  <!-- End hover icons -->
        <div class="row">
            <div id="support-reveal" class="medium-6 columns">
                <p>Help support student development and student exposure to financial services careers, by contributing to the Badgers in Finance Fund.  Invest in other areas of UW by visiting <a href="">supportuw.org</a>.</p>

            </div>
        </div>
        <div class="row">
            <div id="news-reveal" class="medium-6 medium-offset-6 columns">
                <div class="row">
                    <div class="medium-6 columns">
                        <p>Stay up on all things UW with a general overview of what’s happening throughout.</p>
                    </div>
                    <div class="medium-6 columns">
                        <ul>
                        <li>Update Magazine</li>
                        <li>On Wisconsin</li>
                        <li>UW Athletics</li>
                        <li>Campus Happenings</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div id="inspire-reveal" class="medium-6 medium-offset-6 columns">
                <div class="row">
                    <div class="medium-6 columns">
                        <p>Reach out to the following UW student organizations to offer guidance and recruit future leaders..</p>
                    </div>
                    <div class="medium-6 columns">
                        <ul>
                        <li>Graduate Finance Organization</li>
                        <li>Women in Finance and Accounting</li>
                        <li>Finance & Investment Society</li>
                        <li>Capital Management Club</li>
                        <li>Economics Students Association</li>
                        <li>Women in Economics</li>
                        <li>Investment Banking Club</li>
                        <li>Financial Occupations Club for University Students</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div><!-- End Reveal boxes -->

and the script code here:

<script>
jQuery(document).ready(function($) {
  $(".show-support").click(function(){
    $("#support-reveal").slideToggle('slow')
  });   
  $(".show-news").click(function(){
    $("#news-reveal").slideToggle('slow')
  });
  $(".show-inspire").click(function(){
    $("#inspire-reveal").slideToggle('slow')
  });
});

</script>

Answer 1

Give the reveal divs the same class, and use data-* attribute to store the partial id of the div you want to display, using $(this) you get the partial and display that div. for example adding data-reveal="support" to the make a gift div, when clicked will show the div with id="support-reveal".

jQuery(document).ready(function($) {
  $(".show-support").click(function(){
    $('.reveal').hide()
    $('#' + $(this).data('reveal') + '-reveal').slideToggle('slow');
  });   
  $(".show-news").click(function(){
    $('.reveal').hide()
    $('#' + $(this).data('reveal') + '-reveal').slideToggle('slow');
  });
  $(".show-inspire").click(function(){
    $('.reveal').hide()
    $('#' + $(this).data('reveal') + '-reveal').slideToggle('slow');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation-float.css" rel="stylesheet"/>
 <div class="row">
            <div id="callout-icons" class="large-12 large-centered columns" data-equalizer="cta">
                <div class="medium-4 small-4 columns overlay-parent container" data-equalizer-watch="cta">
                    <span class="overlay-support">Support</span>
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/images/Support_v2.png" class="image" />
                     <div class="overlay">
                        <div data-reveal="support" class="text show-support">Make a Gift</div>
                     </div>
                </div>
                <div class="medium-4 small-4 columns overlay-parent container" data-equalizer-watch="cta">
                    <span class="overlay-news">News</span>
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/images/news.png" class="image" />
                     <div class="overlay">
                        <div data-reveal="news" class="text show-news">UW News</div>
                     </div>
                </div>  
                <div class="medium-4 small-4 columns overlay-parent container" data-equalizer-watch="cta">
                    <span class="overlay-inspire">Inspire</span>
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/images/inspire.png" class="image" />
                     <div class="overlay">
                        <div data-reveal="inspire" class="text show-inspire">Student Finance Clubs</div>
                     </div>
                </div>
            </div>  
        </div>  <!-- End hover icons -->
        <div class="row">
            <div id="support-reveal" class="medium-6 columns reveal">
                <p>Help support student development and student exposure to financial services careers, by contributing to the Badgers in Finance Fund.  Invest in other areas of UW by visiting <a href="">supportuw.org</a>.</p>

            </div>
        </div>
        <div class="row">
            <div id="news-reveal" class="medium-6 medium-offset-6 columns reveal">
                <div class="row">
                    <div class="medium-6 columns">
                        <p>Stay up on all things UW with a general overview of what’s happening throughout.</p>
                    </div>
                    <div class="medium-6 columns">
                        <ul>
                        <li>Update Magazine</li>
                        <li>On Wisconsin</li>
                        <li>UW Athletics</li>
                        <li>Campus Happenings</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div id="inspire-reveal" class="medium-6 medium-offset-6 columns reveal">
                <div class="row">
                    <div class="medium-6 columns">
                        <p>Reach out to the following UW student organizations to offer guidance and recruit future leaders..</p>
                    </div>
                    <div class="medium-6 columns">
                        <ul>
                        <li>Graduate Finance Organization</li>
                        <li>Women in Finance and Accounting</li>
                        <li>Finance & Investment Society</li>
                        <li>Capital Management Club</li>
                        <li>Economics Students Association</li>
                        <li>Women in Economics</li>
                        <li>Investment Banking Club</li>
                        <li>Financial Occupations Club for University Students</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div><!-- End Reveal boxes -->