jQuery toggleClass example

Toggle class name on click in jQuery

HTML

<!DOCTYPE html>
<html>
<!--Modal Gallery -->
<!--https://github.com/deonvz/modalgallery-->
<!-- NOTE the Slider and moding to other images works perfect in the GIT Repo above , but for this Fiddle Increase the Output window/Block by dragging the Height bigger-- > 
<!--Created by Deon van Zyl-->
<head>
    <meta charset="utf-8" />
    <title>Modal Gallery Test Page</title>
    <!--Font Awesome for back forward arrow-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
    <!-- Start Gallery Modal Code-->
    <a href="#openModal">Open Gallery Modal</a>


    <div id="openModal" class="modalDialog">
        <div>
            <a href="#close" title="Close" class="modalclose">X</a>

            <!--Start Gallery HTML Code-->
            <div class="masterBox">

                <div class="containerBox">

                    <div id="slide" class="row">

                        <ul class="infoBox">
                            <!-- Some diffrent examples of what can be displayed-->
                            <li class="hidden">
                                <div class="columnleft" style="background-color:#aaa;">
                                    <img src="https://preview.ibb.co/b43uR8/img01.jpg" class="activeslideimg">
                                </div><div class="columnright">
                                    <h2>Information</h2>
                                    <p>
                                        <b>Cathkin Community Centre.</b><br />
                                        <b>Community Centre</b><br />
                                        <b>Checklist date:</b>23/01/2018 <br />
                                        <b>Section:</b>Kitchen <br />
                                        <b>Question:</b>All appliances are working and clean

                                    </p>
 ...

CSS

/* Modal Gallery
https://github.com/deonvz/modalgallery
Created by Deon van Zyl */

/* Image preview post browse selection*/
#preview img {
    height: 100px;
}
/* Start Modal Style */

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}



    .modalDialog:target {
        opacity: 1;
        pointer-events: auto;
    }

    .modalDialog > div {
        width: 90%;
        height: 90%;
        position: relative;
        margin: 1% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: #fff;
        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999);
    }



.modalclose {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

    .modalclose:hover {
        background: #00d9ff;
    }

/* End Modal Style */
/* Start Gallery Style */
@import "https://fonts.googleapis.com/icon?family=Material+Icons";

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

h1 {
    text-align: center;
    padding-top: 2rem;
    font-size: 4rem;
    color: #111;
}

.hidden {
    display: none;
}

.masterBox {
    position: relative;
    width: 90%;
    margin: 0 auto;
}

.containerBox {
    overflow: hidden;
    width: 100%;
}

.listBox...

JavaScript

// Modal Gallery
//Created by Deon van Zyl
// Note: this file needs some cleanup as there are parts of webservices tests in between
// https://github.com/deonvz/modalgallery
$(document).ready(function () {
    // Get and list items
    var ulmysiteImages = $('#ulmysiteImages');
    $('#btn').click(function () {
        $.ajax({
            type: 'Get',
            //url: 'api/AttendanceRegister',
            url: 'api/values',
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                ulmysiteImages.empty();
                $.each(data, function (index, val) {
                    //var fullName = val.PictureTakenBy + '' + val.DateImageTaken;
                    //ulmysiteImages.append('<li>' + fullName + '</li>')

                    ulmysiteImages.append('- <a href="#" onClick="deleteitem(\'' + index + '\')" />Delete: </a>' + val + '<br>')
                });
            }
        })
    });

    // Delete Function
    function deleteitem(index) {
        $.ajax({
            type: 'DELETE',
            //url: 'api/AttendanceRegister',
            url: 'api/values/'.index,
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                console.log("deleted: ".index);

            }
        })
    };
    // Clear List of Items
    $('#btnClear').click(function () {
        ulmysiteImages.empty();
    });
    // Upload a image

    $('#btnUploadFile').on('click', function () {

        var data = new FormData();

        var files = $("#fileUpload").get(0).files;

        // Add the uploaded image content to the form data collection
        if (files.length > 0) {
            data.append("UploadedImage", files[0]);
        }

        var files = document.getElementById("fileUpload").files;
        // Let's create an empty `errors` String to collect eventual errors into:
        var errors = "";

    ...