How to automatically open show / hide javascript tab and re-hide on second click

Question

I have some tabs which show hidden information when clicked. But as they are now, they will open but only close when a new tab is clicked. If possible could I get help with these two issues:

1- I want to make the tab close again when you click it a second time.

2- I have links set up to open the page where each section starts. Is there anyway I can make the tab open automatically when that link is clicked?

I appreciate the help.

Edited to show the full code I have now:

$('.drop a').click(function() {
  var $content = $(this).parent().next().toggle();

  //HIDE THIS LINE IF YOU DO NOT WANT TO HIDE OTHER TABS ON CLICK
 $('.droptab').not($content).hide();
});

.droptab {
  display: none
}

<div class="child-page">

<a class="anchor" id="<?php echo $child->post_title; ?>"></a>        

<h2 class="child-title drop"><a><?php echo $child->post_title; ?><span class="down-arrow"><img src="down-arrow.png" /></span></a></h2>

<div class="droptab">

    <div class="description"><?php echo apply_filters('the_content', $child->post_content); ?></div>

    <aside class="sidebar">

        <div class="info">

            <div class="more-but">

                <a href="<?php the_field( 'get_more_url', $child->ID ); ?>" class="button left"><span class="caption">Get More Info</span></a>

            </div>

        </div>
                  
    </aside>

    <div style="clear: both;"></div>

</div><!-- .droptab -->

</div>

Answer 1

Use toggle instead of hide show.

The toggle() method toggles between hide() and show() for the selected elements.

Hide this line "$('.droptab').not($content).hide();" IF YOU DO NOT WANT TO HIDE OTHER TABS ON CLICK

$('.drop a').click(function() {
  var $content = $(this).parent().next().toggle();

  //HIDE THIS LINE IF YOU DO NOT WANT TO HIDE OTHER TABS ON CLICK
  $('.droptab').not($content).hide();
});

//ADD THIS LINE IF YOU WANT TO OPEN FIRST TAB BY DEFAULT ON PAGE LOAD
$('.droptab').first().toggle();

.droptab {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdowntabs">
  <a class="anchor" id="main-tab"></a> 
  <h2 class="drop">
    <a>MAIN TITLE</a>
  </h2>
  <div class="droptab">
    <p>MAIN TITLE CONTENT</p>
  </div>
  <a class="anchor" id="second-tab"></a> 
  <h2 class="drop">
    <a>SECOND TITLE</a>
  </h2>
  <div class="droptab">
    <p>SECOND TITLE CONTENT</p>
  </div>
</div>