Develop Reference

Child grows only in one direction (downward) due to parent padding. Text moves down on hover

My code (2nd demo) and the working code (1st demo) are literally the same, but I think what's happening with the hover effect in my code is that the parent element's padding is respected, and the child is not allowed to grow upward in height. Why doesn't this happen with the 1st demo (orange background), and how can I fix mine? Note that the borders are added for debugging.
Edit: I have found the cause. It is due to the float:left in .menu a.
Can anyone explain why? I know float:left places the element along the left side of the container, but why does this create the undesired effect below? I can't come up with an explanation for why one implies the other.
#import url(https://fonts.googleapis.com/css?family=Raleway);
body {
margin: 0px;
}
div {
padding: 24px;
text-align: center;
font-family: Raleway;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
border: 1px solid blue;
}
#nav-3 {
background: #EEA200;
}
.link-3 {
transition: 0.4s;
color: #ffffff;
font-size: 20px;
text-decoration: none;
padding: 0 10px;
margin: 0 10px;
}
.link-3:hover {
background-color: #eeeeee;
color: #EEA200;
padding: 24px 10px;
}
<div id="nav-3">
<a class="link-3" href="#">Home</a>
<a class="link-3" href="#">About</a>
<a class="link-3" href="#">Contact</a>
<a class="link-3" href="#">Shop</a>
</div>
.header {
height: 50px;
background-color: #008b10;
}
.menu {
padding: 16px;
text-align:center;
font-family: Raleway, arial, sans-serif;
float:left;
overflow: visible;
border: 1px solid blue;
}
.menu a:hover {
background-color: #ffffff;
color: #008b10;
padding: 16px 5px;
}
.menu a {
/*box-sizing: border-box;*/
float: left;
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 18px;
text-decoration: none;
padding: 0 5px;
border: 1px solid red;
}
<div class=header>
<div class="menu">
<a class="help" href="#" id="online_help">Help</a>
<a class="logout" href="#" onclick="openLogout();">Logout</a>
</div>
</div>

.header {
background-color: #008b10;
}
.menu {
padding: 16px;
text-align:center;
font-family: Raleway, arial, sans-serif;
overflow: visible;
border: 1px solid blue;
}
.menu a {
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 18px;
text-decoration: none;
padding: 0 5px;
margin: 0 10px;
}
.menu a:hover {
background-color: #ffffff;
color: #008b10;
padding: 16px 5px;
}
<div class=header>
<div class="menu">
<a class="help" href="#" id="online_help">Help</a>
<a class="logout" href="#" onclick="openLogout();">Logout</a>
</div>
</div>
Just because float:left specify the element placed along the left side of the container.

link didn't work outside of div in notification dropdown menu?

I am creating Notification section, where the link is provided on Notification in dropdown menu, but the link on Notification is not working, it is showing the link which i provided in left bottom of the browser but it can't clickable?
HTML
<i class="fa fa-globe"><span class="badge badge-notify">.</span></i>
<div id="notificationContainer">
<div id="notificationTitle">Notifications</div>
<div id="notificationsBody" class="notifications">
<div class="col-sm-12 col-md-12 col-lg-12">
<a href="notifications.php#1" id="details-container-notification">
<ul class="area-notification">
<li>
<div class="profile-image-notification">
<div id="profile-container-notification">
<image id="profileImageNotification" src="../images/img_avatar.png" />
</div>
</div>
</li>
<li class="description-notification"><p>KEntury Fried Chicken, KFC is now following you is now following you, can you want to follow back him , Thanks.</p></li>
</ul>
</a>
</div>
</div>
</div>
CSS
#notificationContainer {
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: hidden;
position: absolute;
top: 40px;
margin-left: -250px;
width: 400px;
display: none;
z-index: 1;
}
#notificationTitle {
z-index: 1000;
padding: 8px;
font-size: 18px;
background-color: #ffffff;
width: 384px;
border-bottom: 1px solid #dddddd;
font-family:Bookman Old Style ;
}
#notificationsBody {
padding: 0px 0px 0px 0px !important;
min-height:100px;
font-family:Bookman Old Style ;
margin-bottom:0px;
}
#details-container-notification{
margin-top:0%;
text-decoration:none;
float:left;
width:100%;
margin-left:0%;
font-size: 14px;
word-spacing: 1px;
line-height: 150%;
color: darkblack;
text-decoration:none;
font-family:Bookman Old Style ;
border-bottom:1px solid #f5f8fa;
padding:10px;
}
#details-container-notification:hover{
background-color:#fafafa;
}
.area-notification{
width:100%;
}
#profile-container-notification {
float:left;
margin-left:0%;
margin-right:2%;
width: 60px;
height: 60px;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
margin-bottom:15px;
}
#profile-container-notification img {
width: 60px;
height: 60px;
}
#notificationFooter{
background-color: #e9eaed;
text-align: center;
padding: 8px;
width:100%;
font-size: 18px;
border-top: 1px solid #dddddd;
text-decoration:none;
font-family:Bookman Old Style ;
}
.badge-notify{
background:#3897f0;
position:relative;
top: -10px;
left: -35px;
}
JSFIDDLE:- https://jsfiddle.net/r33osLt9/1/

i don't know exactly what your issue , if my thought is right remove
return false from you js , check with working fiddle
$("#notificationContainer").click(function() {
//return false
});
https://jsfiddle.net/r33osLt9/2/
just try with this also
$(function(){
$("#notificationLink").on('click', function(e){
e.preventDefault(); /* this will block the link */
e.stopPropagation();
$("#notificationContainer").slideToggle(300);
});
$("#settingLink").on('click', function(e){
e.preventDefault(); /* this will block the link */
e.stopPropagation();
$("#settingContainer").fadeToggle(300);
});
$(document).on('click', function(){
$("#notificationContainer").hide();
$("#settingContainer").hide();
});
});
.navigation {
width: 100%;
height: 70px;
background-color: #fafafa;
margin-bottom: 1%;
}
#notificationContainer {
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: hidden;
position: absolute;
top: 40px;
margin-left: 0px;
width: 400px;
display: none;
z-index: 1;
}
#notificationTitle {
z-index: 1000;
padding: 8px;
font-size: 18px;
background-color: #ffffff;
width: 384px;
border-bottom: 1px solid #dddddd;
font-family: Bookman Old Style;
}
#notificationsBody {
padding: 0px 0px 0px 0px !important;
min-height: 100px;
font-family: Bookman Old Style;
margin-bottom: 0px;
}
#details-container-notification {
margin-top: 0%;
text-decoration: none;
float: left;
width: 100%;
margin-left: 0%;
font-size: 14px;
word-spacing: 1px;
line-height: 150%;
color: darkblack;
text-decoration: none;
font-family: Bookman Old Style;
border-bottom: 1px solid #f5f8fa;
padding: 10px;
}
#details-container-notification:hover {
background-color: #fafafa;
}
.area-notification {
width: 100%;
}
#profile-container-notification {
float: left;
margin-left: 0%;
margin-right: 2%;
width: 60px;
height: 60px;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
margin-bottom: 15px;
}
#profile-container-notification img {
width: 60px;
height: 60px;
}
#notificationFooter {
background-color: #e9eaed;
text-align: center;
padding: 8px;
width: 100%;
font-size: 18px;
border-top: 1px solid #dddddd;
text-decoration: none;
font-family: Bookman Old Style;
}
.badge-notify {
background: #3897f0;
position: relative;
top: -10px;
left: -35px;
}
#settingContainer {
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: hidden;
position: absolute;
top: 40px;
margin-left: 0px;
width: 180px;
display: none;
z-index: 1;
}
#settingsBody {
padding: 10px 0px 0px 0px !important;
height: 50px;
font-family: Bookman Old Style;
}
.area-setting {
width: 100%;
}
#details-container-setting {
text-decoration: none;
float: left;
width: 100%;
margin-left: 1%;
font-size: 18px;
word-spacing: 1px;
color: darkblack;
text-decoration: none;
font-family: Bookman Old Style;
line-height: 50%;
margin-bottom: 10px;
margin-top: 0%;
padding: 10px;
}
#details-container-setting:hover {
background-color: #fafafa;
}
.icon-bar a {
width: 50px;
float: left;
font-size: 30px;
color: black;
}
.icon1 {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="navigation">
<div class="icon-bar"> <i class="fa fa-search"><span></span></i> <i class="fa fa-envelope"><span class="badge badge-notify">.</span></i> <i class="fa fa-globe"><span class="badge badge-notify">.</span></i>
<div id="notificationContainer">
<div id="notificationTitle">Notifications</div>
<div id="notificationsBody" class="notifications">
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="notifications.php#1" id="details-container-notification">
<ul class="area-notification">
<li>
<div class="profile-image-notification">
<div id="profile-container-notification">
<image id="profileImageNotification" src="http://www.w3schools.com/w3css/img_avatar3.png" />
</div>
</div>
</li>
<li class="description-notification">
<p>KEntury Fried Chicken, KFC is now following you is now following you, can you want to follow back him , Thanks.</p>
</li>
</ul>
</a> </div>
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="notifications.php#2" id="details-container-notification">
<ul class="area-notification">
<li>
<div class="profile-image-notification">
<div id="profile-container-notification">
<image id="profileImageNotification" src="http://www.w3schools.com/w3css/img_avatar3.png" />
</div>
</div>
</li>
<li>
<p class="description-notification">KEntury Fried Chicken</p>
</li>
</ul>
</a> </div>
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="notifications.php#3" id="details-container-notification">
<ul class="area-notification">
<li>
<div class="profile-image-notification">
<div id="profile-container-notification">
<image id="profileImageNotification" src="http://www.w3schools.com/w3css/img_avatar3.png" />
</div>
</div>
</li>
<li>
<p class="description-notification">KFC</p>
</li>
</ul>
</a> </div>
</div>
<a href="notifications.php" id="notificationFooter">
<p>See All</p>
</a> </div>
<i class="fa fa-cog"></i>
<div id="settingContainer">
<div id="settingsBody" class="setting">
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="../edit-profile/edit-profile.php" id="details-container-setting">
<ul class="area-setting">
<li>
<p class="description-setting">Setting</p>
</li>
</ul>
</a> </div>
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="../logout/logout.php" id="details-container-setting">
<ul class="area-setting">
<li>
<p class="description-setting">Logout</p>
</li>
</ul>
</a> </div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Your tag a needs to have display:block.
If not, the tag a cannot contain a block element. Because of a rule of html the unblock-level element cannot have the block-level element inside. If you do, the unblock-level one will not work well.

Why slideToggle is going downwards and out of the screen?

I am writing some code to toggle a div class. I want to slide down the div up to the bottom of the page and slide up when clicked again.
My HTML code contains:
<div class="chat-sidebar">
<div class="chat_head">
<h4 align="center"><b>Online Users</b></h4>
</div>
<div class="chat_body">
<div class="sidebar-name" ></div>
</div>
</div>
and the CSS for this HTML :
.chat-sidebar{
width: 200px;
position: fixed;
height: 370px;;
right: 10px;
bottom: 0px !important;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid rgba(29, 49, 91, .3);
border-radius:5px 5px 0px 0px;
}
.sidebar-name{
padding-left: 10px;
padding-right: 10px;
margin-top : 0.8cm;
font-size: 20px;
}
.chat_head{
background:#f39c12;
color:white;
padding:2px;
font-weight:bold;
cursor:pointer;
border-radius:5px 5px 0px 0px;
margin-top: -10px;
}
and now I am sliding the main chat-sidebar DIV using jQuery function like :
$(document).ready(function() {
$('.chat_head').click(function(){
$('.chat-sidebar').slideToggle('slow');
});
});
slideToggle is working fine when click the .chat_head div. But it is going down too far so that it is not visible anymore (out of the screen). What am I missing here?

You need to slideToggle the .chat_body instead of the whole wrapper div. So just remove the height from .chat-sidebar and move it to .chat_body. Now apply the slideToggle() function on .chat_body:
$(document).ready(function() {
$('.chat_head').click(function() {
$('.chat_body').slideToggle('slow');
});
});
.chat-sidebar {
width: 200px;
position: fixed;
right: 10px;
bottom: 0px !important;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid rgba(29, 49, 91, .3);
border-radius: 5px 5px 0px 0px;
}
.sidebar-name {
padding-left: 10px;
padding-right: 10px;
margin-top: 1px;
font-size: 20px;
}
.chat_head {
background: #f39c12;
color: white;
padding: 2px;
font-weight: bold;
cursor: pointer;
border-radius: 5px 5px 0px 0px;
margin-top: -10px;
}
.chat_body {
height: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chat-sidebar">
<div class="chat_head">
<h4 align="center"><b>Online Users</b></h4>
</div>
<div class="chat_body">
<div class="sidebar-name"></div>
</div>
</div>

Try this :
$(document).ready(function() {
$(".head").on("click",function(){
$(".chat-sidebar").slideToggle("slow");
})
})
.wrapper {
border: 1px solid gray;
width: 200px;
position: fixed;
right: 10px;
bottom: 0;
min-height: 50px;
border-radius:3px 3px 0px 0px;
}
.head {
background:#f39c12;
color:white;
font-weight:bold;
cursor:pointer;
position: absolute;
width: 200px;
height: 50px;
border-radius:5px 5px 0px 0px;
}
.chat-sidebar {
background-color: #fff;
height: 200px;
}
<div class="wrapper">
<div class="head">
<h4 align="center"><b>Online Users</b></h4>
</div>
<div class="chat-sidebar"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Different content showing on click

I managed to make it so that when I click on a button, a div shows/hides, thanks to this simple script:
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
Now I'd like to do the same thing for multiple divs in the same page, but if I use that same script, it will show every hidden div in my page, not just the one below the clicked button. Can anyone help me understand how to modify it?
Here's My DEMO you can clearly see the problem.
EDIT : The left square is supposed to show an image, but I haven't uploaded one yet.

You should use $(this) to refer to the current clicked div, and since you have the same class on the both of button you should check which one of them is clicked the perform the operation related with it :
$('.show_hide').click(function(){
if($(this).text()=='Close') //Close Case
$(this).closest('.slidingDiv').slideToggle();
else //More Case
$(this).closest('.news_button').next('.slidingDiv').slideToggle();
});
Hope this helps.
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
if($(this).text()=='Close') //Close Case
$(this).closest('.slidingDiv').slideToggle();
else //More Case
$(this).closest('.news_button').next('.slidingDiv').slideToggle();
});
});
.news_div_blue{
background-color: #000000;
color: #ffffff;
margin: auto;
margin-top: 10px;
width: 1050px;
height: 210px;
}
.news_div_blue a{
color: #ffffff;
margin-top: 0px;
}
.title_div_blue{
z-index: 90;
background-color: #000000;
width: 1050px;
height: 210px;
margin-bottom: 0px;
}
.news_p_blue{
margin-left: 10px;
margin-top: 5px;
width: 98%;
color: #ffffff;
font-family:"Myriad Pro","Trebuchet MS", sans-serif;
color:#404040;
font-size: 16px;
text-align: justify;
}
/* HIDE - SHOW */
.slidingDiv {
height: auto;
width: 1048px;
background-color: #E8f1fd;
margin: auto;
margin-top: 0px;
z-index: 100;
border: 1px solid #0E4186;
}
.show_hide {
display:none;
}
/*******/
.news_image{
float: left;
width: 23%;
border: 1px solid white;
height: 150px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.news_title_blue{
font-family:"Myriad Pro","Trebuchet MS", sans-serif;
color: #ffffff;
float: right;
width: 73%;
border: 1px solid white;
height: 150px;
text-align: justify;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.news_button{
float: right;
margin-right: 10px;
margin-top: -40px;
}
/* Button Graphic */
.button_news {
border-top: 1px solid #ffffff;
background: #3663a3;
background: -webkit-gradient(linear, left top, left bottom, from(#0e4086), to(#3663a3));
background: -webkit-linear-gradient(top, #0e4086, #3663a3);
background: -moz-linear-gradient(top, #0e4086, #3663a3);
background: -ms-linear-gradient(top, #0e4086, #3663a3);
background: -o-linear-gradient(top, #0e4086, #3663a3);
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
border-radius: 24px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #ffffff;
font-size: 15px;
font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
text-decoration: none;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news_div_blue">
<div class="title_div_blue">
<div class="news_image"><img src=""/></div>
<div class="news_title_blue">Title</div>
</div> <!-- END title_div_blue -->
<div class="news_button"><button class="button_news">More</button></div>
<div class="slidingDiv">
<p class="news_p_blue">
This is the first hidden text
<br/>
<br/>
<br/>
...
</p>
<div class="news_button"><button class="button_news">Close</button></div>
</div> <!-- END slidingDiv -->
<div class="title_div_blue">
<div class="news_image"><img src=""/></div>
<div class="news_title_blue">Title2</div>
</div> <!-- END title_div_blue -->
<div class="news_button"><button class="button_news">More</button></div>
<div class="slidingDiv">
<p class="news_p_blue">
This is the second hidden text
<br/>
<br/>
<br/>
...
</p>
<div class="news_button"><button class="button_news">Close</button></div>
</div> <!-- END slidingDiv -->
</div> <!-- END news_div_blue -->

convert css code from :hover to click

i have a problem :
there is in code , popup opens and close when the mouse hovers over the image, I want it to open and close when i press on the image .
photo on this code:
<a class="textlink" href="#" style="padding:10px 0;">
<img src="alert/images.gif" style="width: 21px;" />
<span id="mes">$count</span>
</a>
the full code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<style type="text/css">
a {
text-decoration: none;
color: #838383;
}
a:hover {
color: black;
}
#menu {
position: relative;
margin-left: auto;
top: -34px;
}
#menu ul {
list-style-type: none;
}
#menu li {
float: left;
position: relative;
text-align: center;
}
#menu ul.sub-menu {
position: absolute;
left: -10px;
z-index: 90;
display: none;
}
#menu ul.sub-menu li {
text-align: right;
}
#menu li:hover ul.sub-menu {
display: block;
}
.egg {
padding: 10px;
margin: 5px 5px 5px 5px;
position: relative;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
background-color: #fff;
border-radius: 3px 3px 3px 3px;
border: 1px solid rgba(100, 100, 100, 0.4);
}
.egg_Body {
border-top: 1px solid #D1D8E7;
color: #808080;
}
.egg_Message {
font-size: 13px !important;
font-weight: normal;
overflow: hidden;
}
h3 {
font-size: 13px;
color: #333;
margin: 0;
padding: 0;
}
.comment_ui {
border-bottom: 1px solid #e5eaf1;
clear: left;
float: none;
overflow: hidden;
padding: 6px 4px 3px 6px;
width: 331px;
cursor: pointer;
white-space: pre-line;
}
.comment_ui:hover {
background-color: #F7F7F7;
}
.comment_actual_text img {
margin: 0px 0px 0px 7px;
}
.dddd {
background-color: #f2f2f2;
border-bottom: 1px solid #e5eaf1;
clear: left;
float: none;
overflow: hidden;
margin-bottom: 2px;
padding: 6px 4px 3px 6px;
width: 331px;
}
.comment_text {
border-radius: 2px 2px 2px 2px;
padding: 2px 0 4px;
color: #333333;
}
.comment_actual_text {
display: inline;
padding-left: .4em;
}
ol {
list-style: none;
margin: 0 auto;
width: 500px;
margin-top: 20px;
}
#mes {
padding: 0px 3px;
border-radius: 3px 3px 3px 3px;
background-color: rgb(240, 61, 37);
background-color: #FF00CC;
font-size: 9px;
font-weight: bold;
color: #fff;
position: absolute;
top: 5px;
left: 73px;
}
.toppointer {
background-image: url(alert/top.png);
background-position: -82px 0;
background-repeat: no-repeat;
height: 11px;
position: absolute;
top: -11px;
width: 20px;
right: 276px;
}
.clean {
display: none
}
.textlink {
display: block;
width: 140px;
}
</style>
<span id="menu">
<ul>
<li>
<a class="textlink" href="#" style="padding:10px 0;">
<img src="alert/images.png" style="width: 21px;" />
<span id="mes">$count</span>
</a>
<ul class="sub-menu">
<li class="egg">
<div class="toppointer">
<img src="alert/top.png" />
</div>
<div id="view_comments"></div>
$all
<if condition="$count_all > 0 ">
<div class="bbbbbbb" id="view">
<div style="background-color: #F7F7F7; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; position: relative; z-index: 100; padding:8px; cursor:pointer;">
view all
</div>
</div>
</if>
</li>
</ul>
</li>
</ul>
</span>
Thank you very much !

Instead of the :hover pseudo-class, use the :active pseudo-class.
So the CSS block would look like this:
a:active {
color: black;
}
For more info, take a look at this: https://developer.mozilla.org/en-US/docs/Web/CSS/:active

Toggle with only CSS is a little bit tricky, but here is one way of doing it:
Demo: http://jsfiddle.net/DerekL/R5Bm5/
<input id="control" type="checkbox">
<label for="control"><span id="toggle">Toggle</span></label>
<div class="more">Here's more</div>
.more{
height: 0px;
overflow: hidden;
}
#control:checked ~ .more{
/*Do whatever you want here*/
height: 20px;
}
#control{
display: none;
}
#toggle{
color: blue;
text-decoration: underline;
cursor: pointer;
}
Of course, you can always toggle with JavaScript:
$("#toggle").click(function(){
$(".more").toggle();
});
A better demo according to your description: http://jsfiddle.net/DerekL/R5Bm5/2/