How to hide all divs except for one with jQuery? (undefined function error)

Question

I want to hide all divs except for one when clicking on the corresponding link. I found some code that seems to meet my needs, but I keep getting an undefined function error in console. (Uncaught ReferenceError: showonlyone is not defined)

<aside>
  <div><a id="myHeader1" href="javascript:showonlyone('newboxes1');">Blog</a></div>
  <div><a id="myHeader2" href="javascript:showonlyone('newboxes2');">Shop</a></div>
  <div><a id="myHeader3" href="javascript:showonlyone('newboxes3');">Press/Media</a></div>
</aside>

<section class="main">
  <div class="newboxes" id="newboxes1" >
    <h2>Here's the Blog!</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus incidunt, eum ex tempore, inventore quibusdam. Suscipit asperiores aperiam provident sunt cupiditate non.</p>
  </div>
  <div class="newboxes" id="newboxes2" >
    <h2>This Section is Where to Shop for Water</h2>
    <ul>
        <li>Shop Here</li>
    </ul>
  </div>
  <div class="newboxes" id="newboxes3" >
    <h2>Here's all the press and Media Stuff</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus tempora nihil sed at eius ratione molestias cum eaque necessitatibus voluptatibus nisi illum sequi eos voluptates sit possi</p>
    </div>
</section>

<script>
$(document).ready(function(){
  function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(200);
          }
          else {
               $(this).hide(600);
          }
     });
  }
});
</script>

Answer 1

This code will work:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<aside>
  <div><a id="myHeader1" href="javascript:showonlyone('newboxes1');">Blog</a></div>
  <div><a id="myHeader2" href="javascript:showonlyone('newboxes2');">Shop</a></div>
  <div><a id="myHeader3" href="javascript:showonlyone('newboxes3');">Press/Media</a></div>
</aside>

<section class="main">
  <div class="newboxes" id="newboxes1" >
    <h2>Here's the Blog!</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus incidunt, eum ex tempore, inventore quibusdam. Suscipit asperiores aperiam provident sunt cupiditate non.</p>
  </div>
  <div class="newboxes" id="newboxes2" >
    <h2>This Section is Where to Shop for Water</h2>
    <ul>
        <li>Shop Here</li>
    </ul>
  </div>
  <div class="newboxes" id="newboxes3" >
    <h2>Here's all the press and Media Stuff</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus tempora nihil sed at eius ratione molestias cum eaque necessitatibus voluptatibus nisi illum sequi eos voluptates sit possi</p>
    </div>
</section>

<script>
  $ = jQuery;
  function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(200);
          }
          else {
               $(this).hide(600);
          }
     });
  }
</script>

Note, that I am linking to Google's hosted jquery.min.js. Also, as user false points out in his comment your showonlyone is scoped inside the call to ready. That is the root cause of the error message you are seeing.

Answer 2

Here is a simple and very flexible way, jsfiddle link

<aside>
    <div><a id="myHeader1" class="link" data-link="newboxes1" href="javascript:void();">Blog</a>
    </div>
    <div><a id="myHeader2" class="link" data-link="newboxes2" href="javascript:void();">Shop</a>
    </div>
    <div><a id="myHeader3" class="link" data-link="newboxes3" href="javascript:void();">Press/Media</a>
    </div>
</aside>
<section class="main">
    <div class="newboxes" id="newboxes1">
         <h2>Here's the Blog!</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus incidunt, eum ex tempore, inventore quibusdam. Suscipit asperiores aperiam provident sunt cupiditate non.</p>
    </div>
    <div class="newboxes" id="newboxes2">
         <h2>This Section is Where to Shop for Water</h2>
        <ul>
            <li>Shop Here</li>
        </ul>
    </div>
    <div class="newboxes" id="newboxes3">
         <h2>Here's all the press and Media Stuff</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus tempora nihil sed at eius ratione molestias cum eaque necessitatibus voluptatibus nisi illum sequi eos voluptates sit possi</p>
    </div>
</section>

function showonlyone(thechosenone) {
    $('.newboxes').each(function(index) {
        if ($(this).attr("id") === thechosenone) {
            $(this).show(200);
        } else {
            $(this).hide(600);
        }
    });
}
$(function(){
    $('.link').click(function(){
        showonlyone($(this).data("link")); 
    });
});

Answer 3

There is a better way of setting up your links rather than relying on the href="javascript..." to call your function... JSFiddle

You will need to include the jQuery file like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

New Javascript (and jQuery):

function showonlyone(thechosenone) {
    $('.newboxes').each(function(index) {
        if ($(this).attr("id") == thechosenone) {
            $(this).show(200);
        } else {
            $(this).hide(600);
        }
    });
}
$(function(){
    /*set up all your links to run the showonlyone() function*/
    $('#myHeader1').click(function(){
        showonlyone('newboxes1'); 
    });
    $('#myHeader2').click(function(){
        showonlyone('newboxes2'); 
    });
    $('#myHeader3').click(function(){
        showonlyone('newboxes3'); 
    });
});

Adjusted HTML:

<aside>
    <!--the links in your nav no longer need the href attribute to call the javascript so the void(0) just allows the anchor tag to still behave like a link -->
    <div><a id="myHeader1" href="javascript:void(0);">Blog</a></div>
    <div><a id="myHeader2"  href="javascript:void(0);">Shop</a></div>
    <div><a id="myHeader3"  href="javascript:void(0);">Press/Media</a></div>
</aside>
<section class="main">
    <div class="newboxes" id="newboxes1">
         <h2>Here's the Blog!</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus incidunt, eum ex tempore, inventore quibusdam. Suscipit asperiores aperiam provident sunt cupiditate non.</p>
    </div>
    <div class="newboxes" id="newboxes2">
         <h2>This Section is Where to Shop for Water</h2>

        <ul>
            <li>Shop Here</li>
        </ul>
    </div>
    <div class="newboxes" id="newboxes3">
         <h2>Here's all the press and Media Stuff</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus tempora nihil sed at eius ratione molestias cum eaque necessitatibus voluptatibus nisi illum sequi eos voluptates sit possi</p>
    </div>
</section>