I need to create a pretty simple table that has pictures of our team members (4 total). When one of these images is clicked, I want a 'modal(correct term?)' to open beneath the images and include their biographies, titles, etc. I have included my code below to something that is close to functional, but I cannot figure out how to make one close when the other opens properly.
<script type="text/javascript">
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
</script>
<div class="spoiler">
<img onclick="showSpoiler(this);" src="https://via.placeholder.com/300" />
<div class="inner" style="display:none;">
<h1>John Doe</h1>
<p>President</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere tempus odio, in ornare lacus pulvinar quis. Aliquam sed risus non nisi euismod dignissim quis quis diam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere tempus odio, in ornare lacus pulvinar quis. Aliquam sed risus non nisi euismod dignissim quis quis diam. Nullam venenatis sit amet massa eget bibendum. Maecenas odio mi, tristique et viverra ac, ornare id enim. Aliquam et felis nibh. Etiam pharetra, nisi a scelerisque consectetur, nibh quam volutpat dui, nec faucibus ante nunc vel nisi. Fusce rutrum tempor auctor. Donec feugiat tellus in feugiat ultrices. Nulla et neque tristique, dictum metus in, dapibus eros. Duis interdum erat eget pellentesque tristique.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="spoiler">
<img onclick="showSpoiler(this);" src="https://via.placeholder.com/300" />
<div class="inner" style="display:none;">
This is a spoiler!
</div>
</div>
<div class="spoiler">
<img onclick="showSpoiler(this);" src="https://via.placeholder.com/300" />
<div class="inner" style="display:none;">
This is a spoiler!
</div>
</div>
<div class="spoiler">
<img onclick="showSpoiler(this);" src="https://via.placeholder.com/300" />
<div class="inner" style="display:none;">
This is a spoiler!
</div>
</div>
JSFIDDLE: https://jsfiddle.net/hLkgcqxr/1/
My ideas is that when the user clicks '1' it opens below, and when they click '2' it changes to the biography of user 2.
Please let me know if there's any additional info needed in order to push me in the right direction - I know it can be a bit confusing :)
This logic relies on a css rule that makes the inner elements hidden, so long as the parent spoiler does not have a class of active.
All our logic does is, when an outer is clicked, it removes the active class from any spoiler that already has it, and then adds the active class to the spoiler the outer belongs to.
var $spoilers = $('.spoiler').on('click', '.outer', function(e){
$spoilers.removeClass('active');
$spoilers.has(e.target).addClass('active');
});
.spoiler:not(.active) .inner { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="spoiler">
<img class="outer" src="https://via.placeholder.com/300" />
<div class="inner">
<h1>John Doe</h1>
<p>President</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere tempus odio, in ornare lacus pulvinar quis. Aliquam sed risus non nisi euismod dignissim quis quis diam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere tempus odio, in ornare lacus pulvinar quis. Aliquam sed risus non nisi euismod dignissim quis quis diam. Nullam venenatis sit amet massa eget bibendum. Maecenas odio mi, tristique et viverra ac, ornare id enim. Aliquam et felis nibh. Etiam pharetra, nisi a scelerisque consectetur, nibh quam volutpat dui, nec faucibus ante nunc vel nisi. Fusce rutrum tempor auctor. Donec feugiat tellus in feugiat ultrices. Nulla et neque tristique, dictum metus in, dapibus eros. Duis interdum erat eget pellentesque tristique.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="spoiler">
<img class="outer" src="https://via.placeholder.com/300" />
<div class="inner">
This is a spoiler!
</div>
</div>
<div class="spoiler">
<img class="outer" src="https://via.placeholder.com/300" />
<div class="inner">
This is a spoiler!
</div>
</div>
<div class="spoiler">
<img class="outer" src="https://via.placeholder.com/300" />
<div class="inner">
This is a spoiler!
</div>
</div>
Related
I am trying to fullscreen a div#controls when a button inside it is clicked and make all other div#controls with same parent, div#buttons, disappear.
My HTML:
<div id="testpile" class="inner cover">
<div id="buttons" class="buttons">
<div id="controls" class="col-md-4 rat">
<h1>Rationelt</h1>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
<a id="1" class="btn btn-group btn-default" role="button">Rationelt</a>
</div>
<div id="controls" class="col-md-4 emo">
<h1>Emotionelt</h1>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
<a id="2" class="btn btn-group btn-default" role="button">Emotionelt</a>
</div>
<div id="controls" class="col-md-4 per">
<h1>Personligt</h1>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
<a id="3" class="btn btn-group btn-default" role="button">Personligt</a>
</div>
</div>
</div>
My jQuery:
<script type="text/javascript">
$('.btn-group').on('click', function() {
$(this).parent().toggleClass('col-md-4 col-md-12');
$(this).parent().siblings().toggleClass('col-md-4 col-md-0');
});
</script>
I am quite sure that the problem I am having is that I have not succeeded in targeting the right div, but I have tried everything to solve it myself and sadly, haven't been able to.
As an aside of the control id being duplicated, simply toggle the display of the parents siblings to show/hide them on each button click:
$('.btn-group').on('click', function() {
$(this).parent().siblings().toggle();
});
You are targeting the right div, despite the invalid duplicate IDs.
The use of toggleClass is the problem, especially after the first click, since it will toggle each class from its current state, which will give inconsistent results depending on which order the user clicks on each item -- you also appear to be toggling grid column declarations, which I'm not sure is what you intend?
Below I've changed your code to use addClass and removeClass explicitly (and have made 'hidden' still slightly visible so you can see the effect of subsequent clicks)
$('.btn-group').on('click', function() {
$(this).parent().removeClass('hidden');
$(this).parent().siblings().addClass('hidden');
});
.hidden {opacity:0.1}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testpile" class="inner cover">
<div id="buttons" class="buttons">
<div id="controls" class="col-md-4 rat">
<h1>Rationelt</h1>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
<a id="1" class="btn btn-group btn-default" role="button">Rationelt</a>
</div>
<div id="controls" class="col-md-4 emo">
<h1>Emotionelt</h1>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
<a id="2" class="btn btn-group btn-default" role="button">Emotionelt</a>
</div>
<div id="controls" class="col-md-4 per">
<h1>Personligt</h1>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
<a id="3" class="btn btn-group btn-default" role="button">Personligt</a>
</div>
</div>
</div>
I don't think you are doing anything to the siblings of the parent except just giving them a column class. From what I understand what you need to add is .hide() method.
This will hide the divs that you want hidden.
Here is a link from the jquery api that will help you and give examples link
remove that id controls. IDs should not repeat, use class there like;
<div class="controls col-md-4 rat">
and use JS like;
$('.btn-group').on('click', function() {
$(".controls").hide();
$(this).parents(".controls").show();
});
I have a basic Single Page Website using Angular. I have used an ng-repeat to generate some of the content on the main page. Each item in the repeat is an image, and I want to have an alternate view for each one, showing more detail.
I have a basic implementation for this and the views are toggling using ng-hide/show.
However there seems to be a slight flicker, and I suspect all of each photos view is toggling; as opposed to the one clicked.
Here is the HTML:
<div class="row">
<div class="col-sm-6 col-md-4" ng-repeat='service in services'>
<div class="thumbnail">
<div class='image-container' ng-show="show" ng-style="{'background-image': 'url(' + service.photo + ')'}">
</div>
<div class='image-container alt' ng-hide='show' ng-style="{'background-image': 'url(' + service.photo + ')'}">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla est justo, nec pellentesque ex dictum et. Etiam laoreet, justo in condimentum sodales, nisi sapien euismod dolor, vitae feugiat nulla dui eu eros. Ut efficitur vel ipsum et pellentesque. Sed placerat risus eget euismod mattis.</p>
</div>
<div class="caption">
<h4>{{ service.name }}</h4>
<button ng-click="show=!show" class='service-button'>More Info</button>
</div>
</div>
</div>
</div>
CSS:
.service-button
{
position: absolute;
bottom: 40px;
right: 30px;
}
.image-container
{
width:100%;
height:300px;
}
.alt
{
opacity: 0.4;
font-size: 1.4em;
padding: 10px;
color: black;
}
Controller:
$scope.show = true;
Is there a more efficient way of doing this?
I think the flicker may be happening because you're hiding one div and then showing the other. Right now you have:
<div class='image-container' ng-show="show" ng-style="{'background-image': 'url(' + service.photo + ')'}">
</div>
<div class='image-container alt' ng-hide='show' ng-style="{'background-image': 'url(' + service.photo + ')'}">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla est justo, nec pellentesque ex dictum et. Etiam laoreet, justo in condimentum sodales, nisi sapien euismod dolor, vitae feugiat nulla dui eu eros. Ut efficitur vel ipsum et pellentesque. Sed placerat risus eget euismod mattis.</p>
</div>
Maybe try:
<div class='image-container' ng-class="{'alt': show == true}" ng-style="{'background-image': 'url(' + service.photo + ')'}">
<p ng-show="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla est justo, nec pellentesque ex dictum et. Etiam laoreet, justo in condimentum sodales, nisi sapien euismod dolor, vitae feugiat nulla dui eu eros. Ut efficitur vel ipsum et pellentesque. Sed placerat risus eget euismod mattis.</p>
</div>
So that you're just adding that alt class and showing the info if show == true.
Have you tried adding a boolean show field on each service object. So ng-show="service.show" and ng-click="service.show=!service.show"? That would be my suggested way of handling it
I've tried searching everywhere and as I haven't a clue in javascript I don't really know what I'm doing.
this is the website I'm currently building.
website link
the problem which I'm facing is that I want to be able to click on the name twist, and for it to change into another image:
twistnamehigh.png
and then when I click on another image,
for example, mello, I want the twistnamehigh.png to change back to twistname.png and then melloname.png to change to mellonamehigh.png.
here is the code which I want to work on...
<div id="artnavigation">
<ul class="changeme">
<img src="images/twistname.png" id="twist" width="190px" height="49px" alt="MelloD" /></a>
<img src="images/ashconname.png" id="ashcon" width="190px" height="49px" alt="MelloD" />
<img src="images/melloname.png" id="mello" width="190px" height="49px" alt="MelloD" />
</ul>
</div>
This is the javascript which I have, i've used a method which I found on here that makes the name change the contents of the page.
$('.changeme img').on("click", function(e) {
var $this = $(this),
$id = $this.attr('id'),
$class = '.' + $('.about-' + $id).attr('class').replace('hide', '');
$('.default-text').addClass('hide');
$('.about-' + $id).removeClass('hide');
$('div[class*=about]').not($class).addClass('hide');
});//# sourceURL=pen.js
here is the whole code
<div class="contentBox" id="home">
<div class="blogContainer">
<div id="artnavigation">
<ul class="changeme">
<img src="images/twistname.png" id="twist" width="190px" height="49px" alt="MelloD" /></a>
<img src="images/ashconname.png" id="ashcon" width="190px" height="49px" alt="MelloD" />
<img src="images/melloname.png" id="mello" width="190px" height="49px" alt="MelloD" />
</ul>
</div>
<div class="twistinfobox">
<div class="about-twist">
<div id="arrowtwist"></div>
<div id="twistlogo">
<div id="twistpicture"></div>
</div>
</div>
<div class="about-ashcon hide">
<div id="arrowashcon"></div>
<div id="ashlogo"></div>
<div id="ashpicture"></div>
</div>
<div class="about-mello hide">
<div id="arrowmello"></div>
<div id="mellologo"></div>
<div id="mellopicture"></div>
</div>
<div id="twistboxtext">
<div class="about-twist">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula consequat faucibus. Nulla facilisi. Etiam bibendum, augue
eu vehicula vulputate, felis eros sagittis arcu, ut elementum lectus arcu ac orci. Fusce placerat malesuada turpis, sit amet posuer
e orci cursus a. Phasellus eget bibendum mauris, at aliquet mauris. Nam nisi orci, mattis nec ligula vitae, scelerisque suscipit massa.
Curabitur vestibulum neque id ur
na tempus pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</br></br>
Curabitur consequat ligula odio, et malesuada mi rutrum a. Nulla eget porttitor nibh. Cras vulputate eros orci, sit amet bibendum dui
vulputate at. Duis et placerat urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas
a odio dolor. Aenean vel iaculis massa. Curabitur in augue eget lacus placerat fermentum gravida euismod velit. Nulla varius ligula eu
blandit venenatis. Donec a suscipit tellus. In dictum dolor lacinia, tincidunt orci quis, molestie nisl. Vestibulum auctor laoreet erat.
Suspendisse ac metus ac elit vulputate pharetra.
</p>
</div>
<div class="about-ashcon hide">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula consequat faucibus. Nulla facilisi. Etiam bibendum, augue
eu vehicula vulputate, felis eros sagittis arcu, ut elementum lectus arcu ac orci. Fusce placerat malesuada turpis, sit amet posuer
e orci cursus a. Phasellus eget bibendum mauris, at aliquet mauris. Nam nisi orci, mattis nec ligula vitae, scelerisque suscipit massa.
Curabitur vestibulum neque id ur
na tempus pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</br></br>
</p>
</div>
<div class="about-mello hide">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula consequat faucibus. Nulla facilisi. Etiam bibendum, augue
eu vehicula vulputate, felis eros
</p>
</div>
</div>
</div>
<script>var __links = document.querySelectorAll('a');function __linkClick(e) { parent.window.postMessage(this.href, '*');} ;for (var i = 0, l = __links.length; i < l; i++) {if ( __links[i].getAttribute('target') == '_blank' ) { __links[i].addEventListener('click', __linkClick, false);}}</script>
<script src='js/jquery.min.js'></script>
<script src='js/artist.js'></script>
</div><!-- blogContainer End-->
</div> <!-- contentBox End-->
you could the box-model properties to use a single image tag to load and preload both images you want to switch.
Example :
<img src="myimage" />
img {
height:50px;
width:100px;
padding:0;
background:url(myswitchimage);
}
img:hover {
height:0;
width:0;
padding:25px 50px ;/* img tag has still 50pxX100px size and you see its background only */
}
DEMO by hovering of idea with a few transition effect possible .
If you add a tabindex attribute to img tag , then it can catch the click and you can use it to switch image for its background.
<img src="myimage" tabindex="0"/>
A second click can switch back as well if pointer-events is supported , else click out of image .
img {
height:50px;
width:100px;
padding:0;
background:url(myswitchimage);
}
img:focus {
height:0;
width:0;
padding:25px 50px ;/* img tag has still 50pxX100px size and you see its background only */
pointer-events:none;/* once it has focus, if you try clicking on it it again, it looses it */
}
DEMO 2 by clicking
I'm needing to run a script that I made, it's pretty basic but it is working, but not the way I want, I made this code because I could not find any that could modify
HTML:
<div class="corpo">
<div class="menu-segmento">
<div class="item total">
<div class="item-topo">
<div class="tooltips" >
<img class="ocultar" src="img/ocultar.png" />
<span>Veja menos</span>
</div>
<div class="tooltips" >
<img class="mostrar" src="img/mostrar.png" />
<span>Veja mais</span>
</div>
<p>Drenagem Linfática</p>
</div>
<div class="segmento">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit nulla. Vestibulum sollicitudin sed sapien faucibus porta. Maecenas quis fringilla felis. Vestibulum ultricies quis orci et auctor. Suspendisse vitae mi odio. Maecenas tincidunt nisl sit amet ante ullamcorper bibendum. Vivamus et vestibulum velit. Proin cursus est quis velit euismod, vitae eleifend nisi ultrices. Proin nec felis lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item total">
<div class="item-topo">
<div class="tooltips" >
<img class="ocultar" src="img/ocultar.png" />
<span>Veja menos</span>
</div>
<div class="tooltips" >
<img class="mostrar" src="img/mostrar.png" />
<span>Veja mais</span>
</div>
<p>Drenagem Linfática</p>
</div>
<div class="segmento">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit nulla. Vestibulum sollicitudin sed sapien faucibus porta. Maecenas quis fringilla felis. Vestibulum ultricies quis orci et auctor. Suspendisse vitae mi odio. Maecenas tincidunt nisl sit amet ante ullamcorper bibendum. Vivamus et vestibulum velit. Proin cursus est quis velit euismod, vitae eleifend nisi ultrices. Proin nec felis lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
and here is the JS for jQuery
$(function () { // DOM ready shorthand
var flip = 0;
$('.mostrar').click( function(){
$('.segmento').slideToggle();
$('.mostrar').fadeOut();
$('.ocultar').fadeIn();
});
$('.ocultar').click( function(){
$('.segmento').slideToggle();
$('.ocultar').fadeOut();
$('.mostrar').fadeIn();
});
});
He is opening the 2 and know it is missing a line of code but I have no idea how to fix.
Any suggestions?
LIVE DEMO
If you have i.e this CSS:
.segmento, .ocultar{
display:none;
}
Remove the classes from the images and add to .tooltips:
<div class="corpo">
<div class="menu-segmento">
<div class="item total">
<div class="item-topo">
<div class="tooltips ocultar">
<img src="http://placehold.it/50x50/f00&text=ocultar" />
<span>Veja menos</span>
</div>
<div class="tooltips mostrar" >
<img src="http://placehold.it/50x50/cf5&text=mostrar" />
<span>Veja mais</span>
</div>
<p>Drenagem Linfática</p>
</div>
<div class="segmento">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit nulla. Vestibulum sollicitudin sed sapien faucibus porta. Maecenas quis fringilla felis. Vestibulum ultricies quis orci et auctor. Suspendisse vitae mi odio. Maecenas tincidunt nisl sit amet ante ullamcorper bibendum. Vivamus et vestibulum velit. Proin cursus est quis velit euismod, vitae eleifend nisi ultrices. Proin nec felis lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item total">
<div class="item-topo">
<div class="tooltips ocultar" >
<img src="http://placehold.it/50x50/f00&text=ocultar" />
<span>Veja menos</span>
</div>
<div class="tooltips mostrar" >
<img src="http://placehold.it/50x50/cf5&text=mostrar" />
<span>Veja mais</span>
</div>
<p>Drenagem Linfática</p>
</div>
<div class="segmento">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit nulla. Vestibulum sollicitudin sed sapien faucibus porta. Maecenas quis fringilla felis. Vestibulum ultricies quis orci et auctor. Suspendisse vitae mi odio. Maecenas tincidunt nisl sit amet ante ullamcorper bibendum. Vivamus et vestibulum velit. Proin cursus est quis velit euismod, vitae eleifend nisi ultrices. Proin nec felis lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
And this is all you need:
$(function () { // DOM ready shorthand
$('.mostrar, .ocultar').click( function(){
var $parent = $(this).closest('.item');
$(this).toggle().siblings().toggle();
$parent.find('.segmento').slideToggle();
});
});
On my page I have two kind of columns with several conainers in it.
Now I want to be able to sort these containers in these two columns.
This was not really a problem.
I can sort my containers in the two colums and toggle it on or off.
But now my problem:
I want to sort my containers on reload.
I want to sort and toggle them the same order like before reload.
So I need a cookie. But I have no idea how to do this.
Please have a look at my code:
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.sortable.js"></script>
<style>
body{
font-size:12px;
font-family:helvetica,verdana,arial,sans-serif;
}
h3{
margin:0;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
font-size:12px;
font-weight:bold;
}
#box-left{
width:300px;
float:left;
}
#box-right{
width:300px;
float:left;
}
.box-border{
border:1px solid #333;
margin-left:5px;
margin-right:5px;
margin-top:10px;
}
.container-header{
background:#efefef;
cursor:move;
}
.container-header span{
cursor:pointer;
float:right;
margin-top:-20px;
margin-right:5px;
text-decoration:underline;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".sortable-column").sortable({
connectWith: '.sortable-column'
});
});
function toggleContent(container_id){
$('#' + container_id + ' .container-content').toggle();
}
</script>
<div id="box-left" class="sortable-column">
<div id="container1" class="box-border">
<div class="container-header">
<h3>Box Nummer 1</h3>
<span onclick="toggleContent('container1')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container2" class="box-border">
<div class="container-header">
<h3>Box Nummer 2</h3>
<span onclick="toggleContent('container2')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container3" class="box-border">
<div class="container-header">
<h3>Box Nummer 3</h3>
<span onclick="toggleContent('container3')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container4" class="box-border">
<div class="container-header">
<h3>Box Nummer 4</h3>
<span onclick="toggleContent('container4')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
</div>
<div id="box-right" class="sortable-column">
<div id="container5" class="box-border">
<div class="container-header">
<h3>Box Nummer 5</h3>
<span onclick="toggleContent('container5')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container6" class="box-border">
<div class="container-header">
<h3>Box Nummer 6</h3>
<span onclick="toggleContent('container6')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container7" class="box-border">
<div class="container-header">
<h3>Box Nummer 7</h3>
<span onclick="toggleContent('container7')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container8" class="box-border">
<div class="container-header">
<h3>Box Nummer 8</h3>
<span onclick="toggleContent('container8')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container9" class="box-border">
<div class="container-header">
<h3>Box Nummer 9</h3>
<span onclick="toggleContent('container9')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
</div>
How can I set the cookie? I don't know much about javascript, sry.
If you already use jQuery, take a look at the cookie plugin:
http://plugins.jquery.com/project/cookie
I used it in a project, and it was very useful.
And of course, to see if it worked, you can use the cookie plugin for firebug, Firecookie