I have been trying to find the best way to style select drop downs and since you can't really at all I have been trying to find the best way to recreate a simple version using other form elements like radio buttons/checks.
My question is does anyone have a better method then mine or knows a workaround to style the normal one, this is what I came up with: http://codepen.io/naniio/pen/RPGNGj
HTML:
<div class="container">
<form action="">
<p>Radio buttons can be hidden by adding "hidden"</p>
<input type="radio" id="item-1" name="item-1" value="drama">
<input type="radio" id="item-2" name="item-1" value="humor" >
<input type="radio" id="item-3" name="item-1" value="ecchi" >
<input type="radio" id="item-4" name="item-1" value="magic" >
<div class="select_box">
<span id="select-op-btn" class="js-option">Select</span>
<ul id="options" class="js-drop">
<li><label for="item-1" class="js-option">Drama</label></li>
<li><label for="item-2" class="js-option">Humor</label></li>
<li><label for="item-3" class="js-option">Ecchi</label></li>
<li><label for="item-4" class="js-option">Magic</label></li>
</ul>
</div>
</form>
CSS:
body{
font-size:18px;
line-height:20px;
font-family: 'Open Sans', sans-serif;
}
p{
line-height:22px;
color:#111111;
}
.container{
width:500px;
padding:15px;
margin:50px auto;
}
#select-op-btn{
border:1px solid #F2F2F2;
display:block;
padding:5px;
cursor:pointer;
background-image:url('http://i.imgur.com/K5gtkay.png');
background-repeat:no-repeat;
background-position:right center;
}
.select_box{
box-sizing: border-box;
margin:30px 0;
}
ul#options{
list-style-type:none;
font-size:0px;
border-color:#F2F2F2;
border-style: solid;
border-width: 0px 1px 1px 1px;
}
ul#options li label{
font-size:18px;
display:block;
padding:5px;
}
ul#options li:hover{
background:#F2F2F2;
}
.js-drop{
display:none;
}
.js-option{
display:inline-block;
}
label{
cursor:pointer;
}
JS:
$('input').on('change', function() {
$('#select-op-btn').html(this.checked ? this.value : '');
});
$('.js-option').on('click', function() {
$( "#options" ).toggleClass( "js-drop" );
});
Related
I have below html for a quiz and it requires that each of the radio option should display different color like red, green, blue when clicked and for default conditions all will be white background and if the click is second time using a true false condition it would become white or unselected.
I have tried using radio buttons styled as normal buttons. Would it be better to use checkboxes?
please guide so that I complete it . Would I need to use JS for each set or jquery is easy to use.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family:sans-serif;
}
#radioset {
margin:4px;
float:center;
}
#radioset label {
float:left;
width:170px;
margin:4px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
width:100%
}
#radioset label span {
text-align:center;
font-size: 32px;
padding:13px 0px;
display:block;
}
#radioset label input {
position:absolute;
top:-20px;
visibility: hidden;
}
#radioset input:checked + span {
background-color:red;
color:#F7F7F7;
}
.button {
/*background-color: #4CAF50; Green */
border: 2px solid black;
/*color: white;*/
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 5vw;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
width: 100%;
}
.div1 {
width: 95vw;
border-radius: 20px;
background-color: #ddd;
padding: 10px;
margin:0 auto;
overflow:hidden;
}
.card {
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.9);
transition: 0.3s;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.9);
}
input{
width: 100%;
height: 50px;
font-size: 5vw;
}
h1 {
font-size:6vw;
}
</style>
</head>
<body>
<!-- QUESTIONS-- -->
<div class="div1 card">
<h1>Question 1 ?</h1>
<div id="radioset">
<label><input type="radio" name="toggle"><span>YES</span></label><br>
<label><input type="radio" name="toggle"><span>NO</span></label><br>
<label><input type="radio" name="toggle"><span>N/A</span></label><br>
</div>
</div>
<br>
<div class="div1 card">
<h1>Question 2 ?</h1>
<div id="radioset">
<label ><input type="radio" name="toggle2"><span>YES</span></label><br>
<label ><input type="radio" name="toggle2"><span>NO</span></label><br>
<label><input type="radio" name="toggle2"><span>N/A</span></label><br>
</div>
</div>
<br>
<div class="div1 card">
<h1>Question 3 ?</h1>
<div id="radioset">
<label ><input type="radio" name="toggle3"><span>YES</span></label><br>
<label ><input type="radio" name="toggle3"><span>NO</span></label><br>
<label><input type="radio" name="toggle3"><span>N/A</span></label><br>
</div>
</div>
<p>___________________________________________________________________________________</p>
</body>
</html>
https://jsfiddle.net/mrgyk3zs/
Thanks.
Based on your comments uderneath your question and provided example here my suggenstion:
Changes on your html:
<div id="radioset">
<label><input type="checkbox" name="toggle"><span class="yes">YES</span></label><br>
<label><input type="checkbox" name="toggle"><span class="no">NO</span></label><br>
<label><input type="checkbox" name="toggle"><span class="nut">N/A</span></label><br>
</div>
and the blocks with questions. Add a unique css class to each span element. Also change the type from 'radio' to 'checkbox' because you cannot unselect a radio field, without javascript.
Duplicate your css class
#radioset input:checked + span {
background-color:red;
color:#F7F7F7;
}
three times and add an the additional css class to selector:
#radioset input:checked + span.yes {
background-color:red;
color:#F7F7F7;
}
#radioset input:checked + span.no {
background-color:blue;
color:#F7F7F7;
}
#radioset input:checked + span.nut {
background-color:green;
color:#F7F7F7;
}
Important note: If you want to prevent to select only one, you have to use javascript for it.
If you want to use type radio instead have a look at check/uncheck radio input with javascript hot two uncheck it with plain javascript.
I have one question about add class.
I have created this DEMO from codepen.io .
In this demo you can see there are tree radio button. When you click blue button after checked radio button then the .checkedWrap text will be changing.
I want to add also some class in this .checkedWrap .
So when you click
<div class="row demo">
<input type="radio" id="checked" name="checkit" class="cbx hidden"/>
<label for="checked" class="lbl"></label>TExt 1
<div id="1" class="addthisClassone"></div>
</div>
there is also <div id="1" class="addthisClassone"></div> i want to add addthisClassone from the .checkedWrap also like this:
<div class="checkedWrap addthisClassone"></div>
<div class="checkedWrap addthisClasstwo"></div>
<div class="checkedWrap addthisClasstree"></div>
How can i do that after clicking blue button. Anyone can help me in this regard.
CSS
<div class="container">
<div class="checkedWrap addthisClassone"></div>
<div class="checkList">
<div class="row demo">
<input type="radio" id="checked" name="checkit" class="cbx hidden"/>
<label for="checked" class="lbl"></label>TExt 1
<div id="1" class="addthisClassone"></div>
</div>
<div class="row demo">
<input type="radio" id="checked1" name="checkit" class="cbx hidden"/>
<label for="checked1" class="lbl"></label>fdsaf asdfasd fasdf
<div id="2" class="addthisClasstwo"></div>
</div>
<div class="row">
<input type="checkbox" id="unchecked_disabled" class="cbx hidden" disabled/>
<label for="unchecked_disabled" class="lbl">fdsafasf</label>
<div id="3" class="addthisClasstree"></div>
</div>
</div>
<div class="Click">Click ok to add checked radio text from the red div</div>
</div>
JS
$('body').on('click', '.Click', function(){
var checked_radio_text = $('input[name=checkit]:checked').parent().text();
$('.checkedWrap').text(checked_radio_text);
});
I suggest to add an extra general class instead of ids and data attributes to store the classes you want to change on every radio button, check the example bellow.
Note : To add class you can use addClass() function but that will append classes so every time you click new class will be added, you could reset class attribute using removeClass() on every click and add default class checkedWrap plus the new class :
$('.checkedWrap').removeClass().addClass('checkedWrap '+additional_class);
Hope this helps.
Snippet
$(document).ready(function() {
$('body').on('click', '.Click', function(){
var checked_radio_text = $('input[name=checkit]:checked').parent().text();
var additional_class = $('input[name=checkit]:checked').parent().find('.global-class').data('additional-class');
$('.checkedWrap').text(checked_radio_text);
$('.checkedWrap').removeClass().addClass('checkedWrap '+additional_class);
});
});
.container {
width:400px;
height:auto;
box-shadow:rgba(0, 0, 0, 0.2) 0 13px 13px 0;
-webkit-box-shadow:rgba(0, 0, 0, 0.2) 0 13px 13px 0;
-moz-box-shadow:rgba(0, 0, 0, 0.2) 0 13px 13px 0;
margin:0px auto;
margin-top:10px;
}
.checkedWrap {
width:100% !important;
float:left;
padding:15px;
background-color:#b71c1c;
box-sizing:border-box;
}
.checkList {
width:100%;
padding:10px;
box-sizing:border-box;
float:left;
}
.lbl {
float:left;
position: relative;
display: block;
height: 10px;
width: 34px;
background: #898989;
border-radius: 100px;
cursor: pointer;
transition: all 0.3s ease;
}
.lbl:after {
position: absolute;
left: -2px;
top: -5px;
display: block;
width: 20px;
height: 20px;
border-radius: 100px;
background: #fff;
box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
content: '';
transition: all 0.3s ease;
}
.lbl:active:after { transform: scale(1.15, 0.85); }
.cbx:checked ~ label { background: #6fbeb5; }
.cbx:checked ~ label:after {
left: 20px;
background: #179588;
}
.cbx:disabled ~ label {
background: #d5d5d5;
pointer-events: none;
}
.cbx:disabled ~ label:after { background: #bcbdbc; }
.container {
position: absolute;
top: 250px;
left: 50%;
transform: translate(-50%, -50%);
}
.demo {
padding:30px;
width:100%;
overflow:hidden;
padding:5px;
box-sizing:border-box;
text-indent:10px;
}
.hidden { display: none; }
.Click {
float:left;
margin-top: 30px;
color: #fff;
height:30px;
background-color:#0288d1;
color:#ffffff;
width:100%;
box-sizing:border-box;
text-align:center;
line-height:30px;
font-family: helvetica, arial, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
cursor:pointer;
}
.addthisClassone {
width:10px;
height:10px;
background-color:blue;
}
.addthisClasstwo {
background-color:green;
width:10px;
height:10px;
}
.addthisClasstree {
background-color:black;
width:10px;
height:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="checkedWrap addthisClassone"></div>
<div class="checkList">
<div class="row demo">
<input type="radio" id="checked" name="checkit" class="cbx hidden"/>
<label for="checked" class="lbl"></label>TExt 1
<div data-additional-class='addthisClassone' class="global-class"></div>
</div>
<div class="row demo">
<input type="radio" id="checked1" name="checkit" class="cbx hidden"/>
<label for="checked1" class="lbl"></label>fdsaf asdfasd fasdf
<div data-additional-class='addthisClasstwo' class="global-class"></div>
</div>
<div class="row">
<input type="checkbox" id="unchecked_disabled" class="cbx hidden"/>
<label for="unchecked_disabled" class="lbl">fdsafasf</label>
<div data-additional-class='addthisClasstree' class="global-class"></div>
</div>
</div>
<div class="Click">Click ok to add checked radio text from the red div</div>
</div>
addClass Adds the specified class(es) to each element in the set of
matched elements.
Try out this
$('body').on('click', '.Click', function(){
var checked_radio_text = $('input[name=checkit]:checked').parent().text();
$('.checkedWrap').text(checked_radio_text);
$("#checkedWrap").addClass("addthisClasstree");
});
If you want to add a class with JavaScript, you can use jQuery, it has a function for that.
Check addClass(). It adds a new class to a particular jQuery DOM Element.
Usually for a DropDown menu you would expect that when you chose an option the menu collapse, however this is not my case. I don't want to collapse the dropdown menu if the user tries to login and click on Username and Password:
http://www.filmgratuiti.org/streamingembed2.php?nome=jobs
I remember it worked a while ago probably it's about the CSS, which I have cleaned up in the meantime.
Is there an easy way of doing it?
P.S: I don't know why but it looks like i can't share clickable link ...
try this
HTML
<div class="signup" >
LOGIN
</div>
<div class="login_form ">
<form method="post" action="#">
<p>Email</p>
<p><input type="email" name="email" class="email" placeholder="Email"></p>
<p>Password</p>
<p><input type="password" name="password" class="password" placeholder="Password"></p>
<br>
<p><span><input type="checkbox" name="check" class="check" style="vertical-align:middle;">Remember me</span><span class="login_btn" >Login</span> </p>
</form>
</div><!-- login_form -->
CSS
.signup
{
background-color:rgb(255,255,255);
width:25%;
height:25px;
border-color:rgb(221,221,221);
border-width:1px;
-moz-border-radius:1px;
-webkit-border-radius:1px;
border-radius:1px;
border-style:solid;
text-align:center;
padding:9px 8px 0 5px;
margin-top:10px;
}
.signup a
{color:#444444;
font-size:0.9375em;
text-decoration:none;
}
.login_form
{
width:50%;
height:auto;
padding:10px 0 0 0;
position:absolute !important;
}
.login_form p
{line-height:150%;
font-size:0.875em;
color:#535353;
padding-left:5px;
}
.email, .password
{border:1px solid #D9D8D7;
width:96%;
}
.login_btn
{
display:block;
width:80%;
padding:3px 0 5px 0;
border-color:rgb(242,128,8);
border-width:1px;
border-style:solid;
text-align:center;
margin-bottom:2px;
}
.login_btn a
{color:#fff;
}
JS
$(".login_form").hide();
$(".signup, .login_form").click(function(e) {
$(".login_form").show();
e.stopPropagation();
return true;
});
$(document).click(function(){
$('.login_form').hide(); //hide the form
});
here is the working fiddle
Can someone please take a moment to look over this and let me know where I am going wrong in my code?
For some reason, the content div won't change when the buttons are clicked.
It's very simple, and right now I feel very confused for not being able to find my error.
CSS:
#wrapper {
margin: 0 auto;
width:100%;
max-height: 133px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
line-height:1.5em;
}
#buttons {
width:340px;
float: left;
height: 133px;
margin: 10px 10px 0 0px;
border-right: 1px solid #666;
}
#button1 a {
outline: none;
text-indent: -5000px;
display:block;
width:146px;
height:105px;
background-image:url(images/sprite_v2.png);
background-position: -292px 0px;
background-repeat:no-repeat;
float:left;
margin-right:20px;
}
#button1 a:hover {
background-position: -292 -105px;
}
#button1 a:active {
background-position: -292 -210px;
}
#button2 a {
outline: none;
text-indent: -5000px;
display:block;
width:146px;
height:105px;
background-image:url(images/sprite_v2.png);
background-repeat:no-repeat;
background-position: -438px 0;
float:left;
}
#button2 a:hover {
background-position: -438px -105px;
}
#button2 a:active {
background-position: -438px -210px;
}
#content {
font-family: Arial, Helvetica, sans-serif;
float: left;
display:block;
}
a {
text-decoration:none;
}
ul {
overflow:hidden;
margin: 10px 0 0 8px;
padding:0;
}
li{
line-height:1.5em;
display:inline;
}
#content1 {
color:#953735;
}
#content2 {
color:#604a7b;
}
JavaScript:
$('button').bind('click', function() {
$('div#content').html($('div#content' + ($(this).index()+1)).html());
});
HTML:
<div id="wrapper">
<div id="button">
<div id="button1">
</div>
<div id="button2">
Reporting Administrator
</div>
</div>
<div id="content">
<div id="content1">
<ul>
<li>Stuff1</li><br />
<li>Stuff1</li><br />
<li>Stuff1</li>
</ul>
</div>
<div id="content2" style="display:none;">
<ul>
<li>Stuff2</li><br />
<li>Stuff2</li><br />
<li>Stuff2</li>
</ul>
</div>
</div>
</body>
</html>
The selector $('button') is the problem. You don't want to select a button - element but an element within the div #button, am I right?
So you should take $("#button a") as selector, if you want to append the event handler to all links within the #button element.
David Müller had it correct regarding the button selector being an issue.
The switching wasn't occurring with the event on the link because the index of the links will be 0 since both are only children. If the event is instead on the parent div, the switching works. Below is a jsfiddle and the code.
http://jsfiddle.net/VrKsh/2/
<div id="wrapper">
<div id="button">
<div id="button1">
Content1
</div>
<div id="button2">
Content2
</div>
</div>
<div id="content">
<div id="content1">
<ul>
<li>Stuff1</li><br />
<li>Stuff1</li><br />
<li>Stuff1</li>
</ul>
</div>
<div id="content2" style="display:none;">
<ul>
<li>Stuff2</li><br />
<li>Stuff2</li><br />
<li>Stuff2</li>
</ul>
</div>
</div>
<script type="text/javascript">
$('#button div').bind('click', function() {
$('div#content div:visible').hide();
$('div#content' + ($(this).index() + 1)).show();
});
</script>
please help me with this roll up/down side bar menu.
I have made a video clip to demonstrate.
http://www.youtube.com/watch?v=Eegqh1w3eJQ
Here is html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mode 1</title>
<link href="Style_sheet.css" rel="stylesheet" type="text/css" />
<script src="Display text.js" type="text/javascript"></script>
</head>
<body>
<div class="Body">
<div class="header">
<h1 id="head">Manage Components</h1>
<h3 id="select-system">Select System</h3>
</div>
<div class="side-nav">
57.102 Introductory Spanish<br />
<div id="n1" style="display:none">
Section 1:Introduction to Spanish Culture<br />
<div id="n2" style="display:none">
Topic 1:Getting started<br />
Topic 2:Introduction to Grammar<br /><br /><br />
</div>
Section 2:Getting started with reading and writing<br />
<div id="n3" style="display:none">
Topic 1:Reading Spanish<br />
<div id="nn3" style="display:none">
Mode 1:Spanish Components
<div id="nn4" style="display:none">
Spanish Reading
</div>
</div><br />
Topic 2:Writing in Spanish<br />
</div>
</div><br />
Topic SuperMode<br />
<div id="m1" style="display:none">
Study Guide<br />
Key Words<br />
<div id="m2" style="display:none">
Pragmatics<br />
Manana<br />
Tiempo<br />
Cara<br />
Triste<br />
</div>
Learning Support<br />
Help<br />
Chat<br />
Email<br />
Notes<br />
</div><br />
Pre-defined modes<br />
<div id="p1" style="display:none">
Culture aspects<br />
Reading practice<br />
Writing practice<br />
Listening and speaking<br />
</div>
</div>
<div id="slection">
57.102 Introductory Spanish > Section 1 > Topic 1 > Mode 1
</div>
<div id="content">
<p id="list-component">List of Available Components </p>
<!--<div id="check-box">
<input type="checkbox" value="checkbox1" />
<label id="label">Reading</label>
<label id="label2">15-10-2010</label>
<label id="label">10:52</label>
<label id="label2">Kemp</label><br />
<input type="checkbox" value="checkbox2" />
<label id="label">Listening</label>
<label id="label2">14-10-2010</label>
<label id="label">8:02</label>
<label id="label2">Kemp</label><br />
<input type="checkbox" value="checkbox3" />
<label id="label">Writing</label>
<label id="label2">10-10-2010</label>
<label id="label">7:35</label>
<label id="label2">Kemp</label><br />
<input type="checkbox" value="checkbox4" />
<label id="label">Grammar</label>
<label id="label2">01-10-2010</label>
<label id="label">4:20</label>
<label id="label2">Kemp</label><br />
</div>-->
<table id="tabl">
<tr>
<td><input type="checkbox" value="checkbox1" /></td>
<td>Reading</td>
<td>15-10-2010</td>
<td>10:52</td>
<td>Kemp</td>
</tr>
<tr>
<td><input type="checkbox" value="checkbox2" /></td>
<td>Listening</td>
<td>14-10-2010</td>
<td>08:02</td>
<td>Kemp</td>
</tr>
<tr>
<td><input type="checkbox" value="checkbox3" /></td>
<td>Writing</td>
<td>10-10-2010</td>
<td>07:35</td>
<td>Kemp</td>
</tr>
<tr>
<td><input type="checkbox" value="checkbox4" /></td>
<td>Grammar</td>
<td>01-10-2010</td>
<td>04:20</td>
<td>Kemp</td>
</tr>
</table><br />
<input type="button" name="edit_button" id="save_but" value="Edit" />
<input type="button" name="delete_button" id="cancel_but" value="Delete" />
<input type="button" name="Student Preview" id="cancel_but" value="preview" onclick="window.location.href='student_preview.html'" />
<input type="button" name="back" id="preview-but" value="Back" />
</div>
</div>
</body>
</html>
Here is javascript
function show(id)
{
object=document.getElementById(id);
if(object.style.display=="none")
{
object.style.display="";
}
else
{
object.style.display="none";
}
}
Here is CSS
#charset "utf-8";
/* CSS Document */
html,body{
padding:0;
margin:0;
background-color:#E8E8E8;
}
.Body{
background-color:#FFF;
width:1050px;
height:900px;
margin:auto;
padding:0;
position:relative;
}
.header{
background-color:#FFF;
width:1048px;
height:140px;
float:right;
border:1px #F00 dotted;
position:relative;
}
.header #head{
text-align:center;
font-family:Verdana, Geneva, sans-serif;
font-size:46px;
}
.header #select-system{
position:absolute;
left:20px;
bottom:-18px;
font-family:Verdana, Geneva, sans-serif;
text-decoration:underline;
}
.side-nav{
background-color:#FFF;
width:250px;
height:757px;
position:absolute;
left:auto;
bottom:0px;
border:1px dotted #F00;
}
.side-nav #english{
text-decoration:none;
font-size:18px;
font-weight:bold;
padding:5px;
color:#06F;
}
.side-nav #blue{
color:#03F;
text-decoration:none;
font-weight:bold;
font-size:14px;
}
.side-nav #green{
color:#6F0;
text-decoration:none;
font-size:14px;
font-weight:bold;
padding-left:15px;
}
.side-nav #dark_red{
color:#900;
text-decoration:none;
font-size:14px;
font-weight:bold;
padding-left:30px;
}
.side-nav #light_blue{
color:#0CF;
text-decoration:none;
font-size:14px;
font-weight:bold;
padding-left:45px;
}
.side-nav #red{
color:#F00;
text-decoration:none;
font-size:14px;
font-weight:bold;
padding-left:60px;
}
.Body #content{
position:absolute;
left:260px;
top:180px;
width:780px;
height:700px;
border:1px solid #F00;
}
.Body #content1{
position:absolute;
left:260px;
top:150px;
width:780px;
height:740px;
border:1px solid #F00;
}
.Body #txt{
margin-left:20px;
}
.Body #slection{
position:absolute;
left:260px;
top:150px;
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
color:#F00;
font-weight:bold;
}
.Body #boxes{
border:2px solid #000;
margin-left:10px;
margin-top:10px;
height:25px;
}
.Body #text{
font-weight:bold;
font-size:20px;
margin-left:20px;
margin-top:10px;
}
.Body #cont_box{
width:730px;
height:180px;
border:2px solid #000;
margin-left:20px;
font-size:20px;
color:#00F;
padding:5px;
}
.Body #cont_box1{
width:730px;
height:280px;
border:2px solid #F60;
margin-left:13px;
font-size:20px;
color:#06F;
padding:10px;
}
.Body #cont_box2{
width:645px;
height:350px;
border:2px solid #F60;
margin-left:60px;
font-size:20px;
color:#06F;
}
.Body #browse_box{
border:2px solid #000;
margin-left:150px;
margin-bottom:10px;
height:25px;
width:400px;
}
.Body #button{
width:65px;
height:30px;
font-weight:700;
color:#03F;
margin-left:10px;
}
.Body #button:hover{
background-color:#09F;
}
.Body #button_more{
width:65px;
height:30px;
font-weight:700;
color:#03F;
margin-left:567px;
}
.Body #save_but{
width:65px;
height:30px;
font-weight:700;
color:#03F;
margin-left:150px;
}
.Body #cancel_but{
width:65px;
height:30px;
font-weight:700;
color:#03F;
margin-left:20px;
}
.Body #preview-but{
width:65px;
height:30px;
font-weight:700;
color:#03F;
margin-left:100px;
}
.Body #preview-but:hover{
color:#009;
}
.Body #checkbox{
margin-left:150px;
height:20px;
}
.Body #dropdownbox{
width:180px;
height:30px;
position:absolute;
left:280px;
top:10px;
}
.Body #b1{
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:36px;
color:#F00;
}
.Body #icons{
width:130px;
height:140px;
margin-right:10px;
margin-left:60px;
margin-top:50px;
float:left;
}
.Body #text_icons{
width:190px;
height:15px;
float:left;
font-size:14px;
text-decoration:none;
color:#06F;
margin-left:20px;
margin-right:5px;
}
.Body #extra-materials{
font-size:18px;
text-decoration:none;
margin-left:60px;
color:#06F;
}
.Body #extra-materials:hover{
text-decoration:underline;
}
.Body #list-component{
margin-left:40px;
font-size:18px;
font-weight:bold;
}
.Body #check-box{
margin-left:150px;
}
.Body #label{
margin-left:30px;
}
.Body #label2{
margin-left:80px;
}
.Body #tabl{
border:hidden;
width:500px;
height:10px;
margin-left:150px;
margin-top:50px;
}
Please help!!!
Thanks in advance!
It looks to me that your problem lies in the fact that your "Spanish Component" link sends you to a different .html page. When the new page loads, the menu on the left side of the page also reloads to its original state (with everything hidden, or "rolled up" as you say). So, the two solutions I can see are:
(1) Don't let the page reload.
(2) Save the state of the menu, and send that state to the new page (mode 1.html), so when the new page loads, you can load the menu appropriately.
To implement the first solution, I would use AJAX to dynamically get the data from mode 1.html and display it on the page without the page reloading. If you are unfamiliar with AJAX w3schools.com has a pretty good tutorial here.
To implement the second solution, you need a way to save the state, then send it to the next page. This would probably require some server-side scripting, and even then probably wouldn't work as well as the first solution, so I would suggest sticking with the AJAX solution.