Button to toggle fullscreen works only for first element

Support
1

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:

<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:

/* 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:

$(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');
    })
});
2

You can’t have multiple elements with same ID. Change IDs to be different (or remove if not used elsewhere) and target selector by class name. Eg.:

<a href="#" class="projekt-fullscreen" role="button" title="Erweitern"></a>
<...>
$("a.projekt-fullscreen").click(function (e) {}
1 Like
3

Thank you very much! Now it works!