UPDATE2
To avoid the jerking behavior when clicking the .hide and .show links, simply include event.preventDefault() in your jQuery function.
<script>
$("#container").hide();
$(".show, .hide").click(function(event) { // Pass the event object here
event.preventDefault(); // Then use the preventDefault() property
$("#container").slideToggle("slow");
});
</script>
UPDATE
I misinterpreted the question initially. It seems that you wanted the toggle image inline with the other anchors. This would be quite complex to achieve. The .show is located in another div and nested. Therefore, just add a similar img inside .miniNav and ensure that the other image disappears. Also, I used a background-image for the one inside .miniNav as it's easier to handle as a link. It would be better for you to refer to the jQuery code than for me to explain it all. Additionally, I changed the class of the "Close CV" link to .hide to avoid sharing styles and then added .hide to the jQuery for consistent functionality.
The last link "Close CV" will align properly if your #nameTag is @ 550px wide. Otherwise, the link may wrap to the next line if less than 550px in width. To prevent wrapping, make .miniNav and the anchors behave like table components by adding display:table-row to .miniNav and display:table-cell to each anchor.
I adjusted padding so that the links remain consistent even when #nameTag is compact. The
|
was removed and replaced with
border-right: 1px solid blue;. For centering the links,
margin: 0 auto; display: table; was included in
#container.
You might consider using percentages or ems instead of pixels for margins and padding to keep your text consistently on one line. Some experimentation may be required, so it's up to you to decide.
By the way, when specifying selectors in CSS, be specific for each one if there are multiple selectors that apply to a ruleset.
Example
.miniNav a:hover,
a:active {
color: #000;
}
Anchors that are descendants of .mini-nav turn black on hover / Any active anchor becomes black.
.miniNav a:hover,
.miniNav a:active {
color: #000;
}
Anchors that are descendants of .mini-nav change to black on hover or when active.
Changes
#container {
padding: 10px 0px 15px 7px;
margin: 0 auto;
display: table;
}
.miniNav {
text-align: center;
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
display: table-row;
}
.miniNav a,
.miniNav a:link,
.miniNav a:visited {
color: #0033AA;
text-decoration: none;
display: table-cell;
border-right: 1px solid blue;
padding: 0 7px;
}
...
.miniNav a:last-of-type {
border-right: 0px none transparent;
}
SNIPPET
$("#container").hide();
$(".show, .hide").click(function() {
$('.show').toggle();
$("#container").slideToggle("slow");
});
#nameTag {
max-width: 800px;
min-width: 550px;
margin: 0 auto;
background-color: #FFFFFF;
-webkit-box-shadow: 2px 2px 2px 1px hsla(0, 0%, 0%, 0.72);
box-shadow: 2px 2px 2px 1px hsla(0, 0%, 0%, 0.72);
border-radius: 43px;
border: 2px solid #4B4949;
}
#tagTop {
width: 100%;
height: auto;
display: block;
color: #fff;
font-size: 30px;
text-align: center;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
background-color: #0033AA;
padding-top: 5px;
padding-bottom: 10px;
}
#tagBottom {
width: 100%;
height: 50px;
display: block;
color: #FFFFFF;
text-align: center;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
background-color: #0033AA;
padding-top: 5px;
padding-bottom: 10px;
}
#tagBottom > a:link,
a:visited {
color: #fff;
}
#container {
padding: 10px 0px 15px 7px;
margin: 0 auto;
display: table;
}
.miniNav {
text-align: center;
font-size: 18px;
font-weight: 600;
margin: 0px auto 10px;
display: table-row;
}
.miniNav a,
.miniNav a:link,
.miniNav a:visited {
color: #0033AA;
text-decoration: none;
display: table-cell;
border-right: 1px solid blue;
padding: 0 7px;
}
.miniNav a:hover,
.miniNav a:active {
color: #000;
}
.miniNav a:last-of-type {
border-right: 0px none transparent;
}
a.img {
background: url(http://placehold.it/80x50/eea/e00?text=First=slide+image)no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nameTag">
<div id="tagTop">
<h3>HELLO</h3>
my name is
</div>
<div id="name">
<div class="show">
<a href="#">
<img src="images/name.jpg" width="100%" alt="First slide image" class="center-block">
</a>
</div>
</div>
<div id="container">
<div class="miniNav">
<a href="#" class='img'>First slide image</a>
<a href="#" class="toggle">Change Font</a>
<a href="documents/EvanGrabenstein_graphicCV.pdf" target="_blank">Download Graphic CV</a>
<a href="documents/EvanGrabenstein_typedCV.pdf" target="_blank">Download Typed CV</a>
<a class="hide" href="#">Close CV</a>
</div>
</div>
<div id="tagBottom">
</div>
</div>