Hi,
I am trying to build a webpage for my class with exercises and projects and I want these to have a button, with which one can toggle them into "fullscreen"-mode. I have already managed to add this button and it works, but it only works for the first project (or exercise) on a page. If I click on the button of the second project, the site jumps to the top and nothing else happens.
Is there someone, who could help me?
HTML / Markdown on the page:
HTML
<div markdown="1" class="projekt">
#### Fußgängerampel
<div class="projekt-actions">
<a href="#" id="projekt-fullscreen" role="button" title="Erweitern"><i class="fa fa-expand"></i></a>
</div>
Baue und programmiere eine Fußgängerampel! Nutze dazu die Informationen aus dem Info-Kasten zum Taster.
</div>
<div markdown="1" class="projekt">
#### Juke-Box
<div class="projekt-actions">
<a href="#" id="projekt-fullscreen" role="button" title="Erweitern"><i class="fa fa-expand"></i></a>
</div>
Baue und programmiere eine Juke-Box!
</div>
CSS:
CSS
/* toggle class 'aufgabe' and 'projekt' to fullscreen */
.aufgabe-actions, .projekt-actions {
float: right;
/*margin-left: auto;
margin-right: 0;
display: inline-block;
text-align: right;*/
}
.aufgabe-fullscreen {
display: block;
z-index: 9999;
position: fixed;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin-top: 0em;
margin-bottom: 0em;
overflow: auto;
padding-left: 10%;
padding-right: 10%;
padding-top: 2em;
}
.projekt-fullscreen {
display: block;
z-index: 9999;
position: fixed;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin-top: 0em;
margin-bottom: 0em;
overflow: auto;
padding-left: 10%;
padding-right: 10%;
padding-top: 2em;
border-left: 35px solid #007f61;
}
Javascript:
JAVASCRIPT
$(document).ready(function () {
//Toggle fullscreen
$("#aufgabe-fullscreen").click(function (e) {
e.preventDefault();
var $this = $(this);
if ($this.children('i').hasClass('fa-expand'))
{
$this.children('i').removeClass('fa-expand');
$this.children('i').addClass('fa-compress');
}
else if ($this.children('i').hasClass('fa-compress'))
{
$this.children('i').removeClass('fa-compress');
$this.children('i').addClass('fa-expand');
}
$(this).closest('.aufgabe').toggleClass('aufgabe-fullscreen');
});
$("#projekt-fullscreen").click(function (e) {
e.preventDefault();
var $this = $(this);
if ($this.children('i').hasClass('fa-expand'))
{
$this.children('i').removeClass('fa-expand');
$this.children('i').addClass('fa-compress');
}
else if ($this.children('i').hasClass('fa-compress'))
{
$this.children('i').removeClass('fa-compress');
$this.children('i').addClass('fa-expand');
}
$(this).closest('.projekt').toggleClass('projekt-fullscreen');
})
});