How to keep <a href> element with a class tied to javascript from acting as a block element

Question

I'm trying to format an inline navigation, but the last link which has a class tied to a piece of javascript seems to be causing the entire link to become a block element rather than putting it inline with the rest of the links in the navigation.

Now, I've done my due diligence ie removing the class, changing the class to something else (not tied to any script) and it puts the link back in line, which is what leads me to believe it has something to do with the javascript it's tied to. I've also tried calling "a.show" in css to display it inline and inline-block to no avail. I feel like I'm missing a well know rule of thumb.

The <a href="#" class="show"> is on Line 20 and the <script> tag is on Line 25 of the HTML

CSS

#nameTag {
  max-width: 800px;
  min-width: 320px;
  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:20px  
}
.miniNav{
  text-align:center;
  font-size:18px;
  font-weight:600;
  margin-bottom:10px;
}
.miniNav a:link,a:visited{
  color:#0033AA;
  text-decoration:none;
}
.miniNav a:hover,a:active{
   color:#000;
}

HTML

<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="toggle">Change Font</a>​
            &nbsp;&nbsp;|&nbsp;&nbsp;
        <a href="documents/EvanGrabenstein_graphicCV.pdf" target="_blank">Download Graphic CV</a>​
            &nbsp;&nbsp;|&nbsp;&nbsp;
        <a href="documents/EvanGrabenstein_typedCV.pdf" target="_blank">Download Typed CV</a>
            &nbsp;&nbsp;|&nbsp;&nbsp;
        <a class="show" href="#">Close CV</a>
    </div>
</div>
<div id="tagBottom">
</div>
<script>
$("#container").hide();
 $(".show").click(function() {
  $("#container").slideToggle("slow");
});
</script>
</div>

Thanks in advanced for any guidance. Cheers.

Answer 1

It appears jQuery's slideToggle() function defaults to display:block , so you can use a callback to set it to display: inline-block manually, as explained in this answer from user black .

Your code would then be:

$("#container").hide();
$(".show").click(function() {
    $("#container").slideToggle("slow", function() {
        if ($("#container").is(':visible'))
            $("#container").css('display','inline-block'); 
    });
});

You'll also need to style your container as display: inline-block , unless I'm misunderstanding your question.

Answer 2

UPDATE2

In order to prevent the jerking behavior when clicking the .hide and .show links, simply add event.preventDefault() to 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 misunderstood what the question was, I believe that you wanted the toggle image inline with the other anchors. That would be more trouble than what it's worth. .show is in another div and nested. So just add an identical img inside .miniNav and make sure the other image disappears. Also, I used a background-image for the one inside .miniNav because it's easier to handle as a link. It's better if you look at the jQuery than for me to explain it. I also changed the "Close CV" link's class to .hide so it doesn't share styles and then added .hide to the jQuery in order to keep functionality.

The last link "Close CV" is ok as long as your #nameTag is @ 550px wide, else the link will naturally wrap to the next line if less than 550px. If you make .miniNav and the anchors behave like table components, there will be no wrapping to the next line. Add display:table-row to .miniNav and display:table-cell to each anchor.

Changed padding so that links conform when #nameTag is compact. Removed   |   and added border-right: 1px solid blue; . To center the links, margin: 0 auto; display: table; margin: 0 auto; display: table; was added to #container .

You could use percentages or ems instead of px for margins and padding so that your text will stay on one line consistently. That takes some experimenting so I'll leave you that to decide.

BTW, when designating selectors in CSS, if you have multiple selectors that apply to a ruleset, you need to be specific on each one.

Example

 .miniNav a:hover,
  a:active {
     color: #000;
  }

Anchors that are descendants of .mini-nav are black when hovered over / Any anchor that is active is black.

   .miniNav a:hover,
   .miniNav a:active {
        color: #000;
   }

Anchors that are descendants of .mini-nav are black when hovered over or is 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>