Develop Reference

replace a div hidden intially by a click on a link from 3 other 3 linkes(3 other divs)

Hi I want to replace a div that is already displayed with another Hidden div choosed when i click on one of them(3 other divs(hidden) initially). the 4 links related to the 4 divs and in same way i can do that in each link clicked. below is the code:
<script type="text/javascript">
#4 Id of divs
var models = document.getElementById('models')
var geometry = document.getElementById('geometry')
var assembly = document.getElementById('assembly')
var loads = document.getElementById('loads')
#4 ID OF links (related to each div)
var models1 = document.getElementById('models1')
var geometryy = document.getElementById('geometryy')
var assemblyy = document.getElementById('assemblyy')
var loads1 = document.getElementById('loads1')
geometryy.addEventListener("click", function () {
models.style.display = "none"
loads.style.display = "none"
assembly.style.display = "none"
geometry.style.display = "block"
})
assemblyy.addEventListener("click", function () {
geometry.style.display = "none"
models.style.display = "none"
loads.style.display = "none"
assembly.style.display = "block"
})
loads1.addEventListener("click", function () {
geometry.style.display = "none"
models.style.display = "none"
assembly.style.display = "none"
loads.style.display = "block"
})
models1.addEventListener("click", function () {
models.style.display = "block"
geometry.style.display = "none"
assembly.style.display = "none"
loads.style.display = "none"
})
</script>
CSS:
<style>
#loads {
display: none;
}
#geometry {
display: none;
}
#assembly {
display: none;
}
#models {
display: block;
}
</style>
some Html code about the 4 divs:
<form action="{% url 'results' %}" method="post" id="gallery" novalidate onsubmit="return mySubmitFunction(event)">
<div style="padding-top: 10px; margin-left:138px;" class="parallax-window tm-section tm-section-gallery tm-flex background " id="models" >
<div style=" background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
<a class="floated" style="font-weight: bolder; border-style: solid;" id="models1">Models</a>
Geometry
Assembly
Loads
</nav>
</div>
.......... some fields related to the div id="models"
</div>
</div>
----------------About the second div
<div style="padding-top: 10px;" class="parallax-window tm-section tm-section-gallery tm-flex" id="geometry" >
<div style=" background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
Models
<a class="floated" style=" font-weight: bolder; border-style: solid;">Geometry</a>
Assembly
Loads
</nav>
</div>
<div style="display: flex;">
<div>
<img style="height: 372px; width:270px; margin-left: 25px;">
</div>
<div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
------ some code for some fields
</div>
</div>
...... </div>
---- </div>
----------------About the third div
<div style="padding-top: 10px;" class="parallax-window tm-section tm-section-gallery tm-flex" id="assembly" >
<div style="background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
Models
Geometry
<a class="floated" style=" font-weight: bolder; border-style: solid;">Assembly</a>
<a href="#loads" class="floated" style=" font-weight: bolder;" id="loads3" >Loads</a>
</nav>
</div>
<div style="display: flex;">
<div>
<img style="height: 372px; width:270px; margin-left: 25px;">
</div>
<div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
------ some code for some fields
</div>
</div>
...... </div>
---- </div>
----------------About the fourth div
<div style="padding-top: 10px; " class="parallax-window tm-section tm-section-gallery tm-flex" id="loads" >
<div style="background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem;">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
<a href="#models" class="floated" style="font-weight: bolder;" >Models</a>
Geometry
Assembly
<a style=" font-weight: bolder; border-style: solid;">Loads</a>
</nav>
</div>
<div style="display: flex;">
<div>
<img style="height: 372px; width:270px; margin-left: 25px;">
</div>
<div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
------ some code for some fields
</div>
</div>
...... </div>
---- </div>
</form>
what i want :at first the "models" div is shown and the other 3 divs("geometry",assembly","loads") are hidden , so i want when i click on "geometry" div , the first div "models" become hidden and the other divs ("assembly" and "loads" still hidden) and so on if click on assembly... i i want to apply that on every div(because evry div has the 4 links)
But it doesn't give me any result!

<html>
<head>
<style>
#div2, #div3, #div4{
display: none;
}
</style>
</head>
<body>
<div style="background-color: #C0C0C0 ;padding-top: 10px;width: 62rem; height: 32rem; ">
<div>
<a href="#models" class="geo wy" style="border-style: solid;" >Models</a>
Geometry
Assembly
Loads
</div>
<div id="div1" class="wy hid">
Models and other stuffs here
</div>
<div id="div2" class="pk hid">
Geometry and other stuffs here
</div>
<div id="div3" class="fk hid">
Assembly and other stuffs here
</div>
<div id="div4" class="gk hid">
Loads and other stuffs here
</div>
</div>
<script>
window.onload = btn() ;
function btn() {
var query = document.querySelectorAll(".geo") ; //No of hrefs
var pts = document.querySelectorAll(".hid"); //No of divs
for(var i=0;i<query.length;i++){
query[i].addEventListener("click", function() { //know which href is being clicked currently
var cla = this.getAttribute('class').split(' ')[1] ; //get second class of current href which would be wy, pk, fk, gk respectively.
var point = document.querySelectorAll("."+cla)[1]; //selecting the div as, [0] would select the href
for(var j=0;j<pts.length;j++){
pts[j].style.display = "none"; //hid all the div
query[j].style.border= "none"; //remove all the href border
}
this.style.border= "solid"; //Add currently clicked href border
point.style.display = "block"; //display currently clicked div
})
}
}
</script>
</body>
</html>
Sorry the id and classes name are given random i am not good at naming. Please don't hesitate to ask if you are confused

Cannot read property 'innerHTML' of null using Tabbis

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Tabbis</title>
<link rel="stylesheet" href="../assets/css/dist/style-default.css">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
/* Reset */
#import url('https://fonts.googleapis.com/css?family=Quicksand:600&display=swap');
* {
margin: 0;
font-family: quicksand;
}
body {
padding: 4rem;
background: #eee;
#media screen and (max-width: 460px) {
padding: 0;
}
}
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: blue;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: fixed;
background-color: transparent;
padding: 5px;
right: 0;
/*border: 1px dashed gray;*/
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 50px;
left: 500px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>
</head>
<body>
<div data-tabs>
<button>INDEX</button>
<button>NORTH</button>
<button>SOUTH</button>
<button>EXTENSION</button>
</div>
<div data-panes>
<!-- Index Tab -->
<div>INDEX</div>
<!-- North Tab -->
<div>
<!-- NE Tabs -->
<div data-tabs>
<button>EAST</button>
<button>WEST</button>
<button>TN</button>
</div>
<div data-panes>
<div>
<div data-tabs>
<button>DNE</button>
<button>HNE</button>
<button>KNE</button>
<button>ENE</button>
<button>WNE</button>
<button>ANE</button>
<button>QNE</button>
<button>BNE</button>
<button>SNE</button>
<button>FNE</button>
<button>XNE</button>
<button>NNE</button>
<button>CNE</button>
<button>ACN</button>
<button>YNE</button>
<button>PB3</button>
</div>
<div data-panes>
<button>DNE JPGs HERE</button>
<button>HNE</button>
<button>KNE</button>
<button>ENE</button>
<button>WNE</button>
<button>ANE</button>
<button>QNE</button>
<button>BNE</button>
<button>SNE</button>
<button>FNE</button>
<button>XNE</button>
<button>NNE</button>
<button>CNE</button>
<button>ACN</button>
<button>YNE</button>
<button>PB3</button>
</div>
</div>
<!-- NW Tabs -->
<div>
<div data-tabs>
<button>DNW</button>
<button>HNW</button>
<button>KNW</button>
<button>ENW</button>
<button>WNW</button>
<button>ANW</button>
<button>QNW</button>
<button>BNW</button>
<button>SNW</button>
<button>FNW</button>
<button>XNW</button>
<button>NNW</button>
<button>CNW</button>
<button>ACN</button>
<button>YNW</button>
<button>PB1</button>
</div>
<div data-panes>
<button>DNW JPGs HERE</button>
<button>HNW</button>
<button>KNW</button>
<button>ENW</button>
<button>WNW</button>
<button>ANW</button>
<button>QNW</button>
<button>BNW</button>
<button>SNW</button>
<button>FNW</button>
<button>XNW</button>
<button>NNW</button>
<button>CNW</button>
<button>ACN</button>
<button>YNW</button>
<button>PB1</button>
</div>
</div>
<!-- TN Tab -->
<div>Pane TN</div>
</div>
</div>
<!-- SOUTH -->
<div>
<div data-tabs>
<button>EAST</button>
<button>WEST</button>
<button>TS</button>
</div>
<div data-panes>
<!-- SE Tabs -->
<div>
<div data-tabs>
<button>DSE</button>
<button>HSE</button>
<button>KSE</button>
<button>ESE</button>
<button>WSE</button>
<button>ASE</button>
<button>QSE</button>
<button>BSE</button>
<button>SSE</button>
<button>FSE</button>
<button>XSE</button>
<button>NSE</button>
<button>CSE</button>
<button>ACS</button>
<button>YSE</button>
<button>PB4</button>
</div>
<div data-panes>
<button>DSE JPGs HERE</button>
<button>HSE</button>
<button>KSE</button>
<button>ESE</button>
<button>WSE</button>
<button>ASE</button>
<button>QSE</button>
<button>BSE</button>
<button>SSE</button>
<button>FSE</button>
<button>XSE</button>
<button>NSE</button>
<button>CSE</button>
<button>ACS</button>
<button>YSE</button>
<button>PB4</button>
</div>
</div>
<!-- SW Tabs -->
<div>
<div data-tabs>
<button>DSW</button>
<button>HSW</button>
<button>KSW</button>
<button>ESW</button>
<button>WSW</button>
<button>ASW</button>
<button>QSW</button>
<button>BSW</button>
<button>SSW</button>
<button>FSW</button>
<button>XSW</button>
<button>NSW</button>
<button>CSW</button>
<button>ASN</button>
<button>YSW</button>
<button>PB2</button>
</div>
<div data-panes>
<button>DSW</button>
<button>HSW</button>
<button>KSW</button>
<button>ESW</button>
<button>WSW</button>
<button>ASW</button>
<button>QSW</button>
<button>BSW</button>
<button>SSW</button>
<button>FSW</button>
<button>XSW</button>
<button>NSW</button>
<button>CSW</button>
<button>ASN</button>
<button>YSW</button>
<button>PB2</button>
</div>
</div>
<!-- TS Tab -->
<div>Pane TS</div>
</div>
</div>
<!-- EXTENSION -->
<div>
<div data-tabs>
<button>EAST</button>
<button>WEST</button>
<button>TSX</button>
</div>
<div data-panes>
<!-- SEX Tabs -->
<div>
<div data-tabs>
<button onclick="onClick()">DSEX</button>
<button onclick="onClick()">HSEX</button>
<button onclick="onClick()">KSEX</button>
<button>ESEX</button>
<button>WSEX</button>
<button>ASEX</button>
<button>QSEX</button>
<button>BSEX</button>
<button>SSEX</button>
<button>FSEX</button>
<button>XSEX</button>
<button>NSEX</button>
<button>CSEX</button>
<button>ACSX</button>
<button>YSEX</button>
<button>PB8</button>
</div>
<div data-panes>
<button>
<div id="dsex">DSEX</div>
</button>
<button>
<div id="hsex>">HSEX</div>
</button>
<button>
<div id="ksex>"></div>
</button>
<button>ESEX</button>
<button>WSEX</button>
<button>ASEX</button>
<button>QSEX</button>
<button>BSEX</button>
<button>SSEX</button>
<button>FSEX</button>
<button>XSEX</button>
<button>NSEX</button>
<button>CSEX</button>
<button>ACSX</button>
<button>YSEX</button>
<button>PB8</button>
</div>
</div>
<!-- SWX Tabs -->
<div>
<div data-tabs>
<button>DSWX</button>
<button>HSWX</button>
<button>KSWX</button>
<button>ESWX</button>
<button>WSWX</button>
<button>ASWX</button>
<button>QSWX</button>
<button>BSWX</button>
<button>SSWX</button>
<button>FSWX</button>
<button>XSWX</button>
<button>NSWX</button>
<button>CSWX</button>
<button>ASNX</button>
<button>YSWX</button>
<button>PB6</button>
</div>
<div data-panes>
<button>DSWX</button>
<button>HSWX</button>
<button>KSWX</button>
<button>ESWX</button>
<button>WSWX</button>
<button>ASWX</button>
<button>QSWX</button>
<button>BSWX</button>
<button>SSWX</button>
<button>FSWX</button>
<button>XSWX</button>
<button>NSWX</button>
<button>CSWX</button>
<button>ASNX</button>
<button>YSWX</button>
<button>PB6</button>
</div>
</div>
<!-- TSX Tab -->
<div>Pane TS</div>
</div>
</div>
<script src='script.js'></script>
</div>
<script src="../assets/js/dist/tabbis.es6.js"></script>
<script>
tabbis({
memory: true
});
</script>
</body>
</html>
var elementaries = '../assets/elementaries/';
var elemLoc = [];
var dsex = [
"this.jpg",
"that.jpg"
];
var hsex = [
"this.jpg",
"that.jpg"
];
// ON click of quadrant (DSEX...) do this
function onClick() {
let id = event.srcElement.id; // returns the id of the button (tab 8-0)
let quadrant = document.getElementById(`${id}`).innerHTML.toLowerCase(); // returns the value of the button ie DSEX
getElemLoc(quadrant); // calls function to make an array of elementaries based on quadrant
loadElementaries(quadrant); // loads elementaries under proper tab
}
// Function makes an array of elementaries based on quadrant
var getElemLoc = (q) => {
elemLoc = [];
let elem = window[q];
elem.forEach(function (img) {
let loc = `${elementaries}${q}/${img}`;
elemLoc.push(loc);
})
};
// Loads elementaries to proper div based on quadrant.
var loadElementaries = (quad) => {
for (var i = 0; i < elemLoc.length; i++) {
document.getElementById(`${quad}`).innerHTML = document.getElementById(`${quad}`).innerHTML + `<a class="thumbnail" href="${elemLoc[i]}"><img src="${elemLoc[i]}" width="350px" height="250px" border="0" /><span><img src="${elemLoc[i]}" width="900" height="700" /><br /></span></a> <br />`;
}
};
When going to the tab Extension/East/DSEX my innerhtml code works perfectly, but if I try the hsex tab the inner html in loadElementaries fails. Does anyone have any idea what's going on. Maybe the way the DOM is loading between tabs?
document.getElementById(`${quad}`).innerHTML works for dsex tab but not hsex...
I'm at work so I'm limited to using client side JS/HTML/CSS so nodejs isn't an option unfortunately.

Why does my page refresh when I press buttons?

This is the relevant code of my page :
HTML :
<button class="ajout-col"><i class="fas fa-columns"> Ajouter une colonne</i></button>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th></th>
<th>
<button class="btn"><i class="fas fa-trash remove-col"></i></button>
<button class="btn"><i class="fas fa-text-height text-col"></i></button>
<button class="btn"><i class="fas fa-sort-numeric-down nbr-col"></i></button>
<input type="text" class="form-control">
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<button class="btn"><i class="fas fa-trash remove-row"></i></button>
</td>
<td>
<input type="text" class="form-control">
</td>
</tr>
</tbody>
</table>
</div>
<button class="ajout-lig"><i class="fas fa-list-ul"> Ajouter une ligne</i></button>
Javascript :
$('body').on('click', '.remove-row', function() {
$(this).parents('tr').remove();
});
(Any button of the grid refreshes my page, I just put the remove-row one because it's the shortest code only for clarity purpose)
(Issue is located on the second tab, just fill info on the first tab to be able to access the second tab)
Any time I press a button from the grid, it refreshes my page
I searched on google and it appears I have to add "return false" or "e.preventDefault();" to fix the issue, and I tried, but it only fixes partially the issue
If I add any of those at the end of each .on('click'), it fixes the issue for Adding a column or a row
But deleting a row or a column is going to work 1 or 2 times, and then my page is going to refresh again... same for the other buttons (text and number buttons)
Thanks in advance for any help ! :)
// Code goes here
$(document).ready(function() {
// add row
$('body').on('click', '.ajout-lig', function() {
var tr = $(this).parents('.table-content').find('.table tbody tr:last');
if (tr.length > 0) {
var clone = tr.clone();
clone.find(':text').val('');
tr.after(clone);
} else {
var cols = $(this).closest('.table-content').find('th').length,
tr0 = $('<tr/>');
tr0.html('<td><button class="btn"><i class="fa fa-trash remove-row"></i></button></td><td> <input type="text" class="form-control"> </td>');
for (var i = 2; i < cols; i++) {
tr0.append('<td> static element </td>')
}
$(this).closest('.table-content').find('.table tbody').append(tr0);
}
});
// delete row
$('body').on('click', '.remove-row', function() {
$(this).parents('tr').remove();
});
// add column
$('body').on('click', '.ajout-col', function() {
$(this).parent().find('.table thead tr').append('<th><button class="btn"><i class="fas fa-trash remove-col"></i></button> <button class="btn"><i class="fas fa-text-height text-col"></i></button> <button class="btn"><i class="fas fa-sort-numeric-down nbr-col"></i></button> <input type="text" class="form-control pull-left" value=""></th>');
$(this).parent().find('.table tbody tr').append('<td><input type="text" class="form-control"></td>');
});
// change column type to text
$('body').on('click', '.text-col', function(event) {
let ndx = $(this).parent().index() + 1;
let inputsCol = $('.table tbody tr td:nth-child(' + ndx + ') input');
inputsCol.attr("type", "text");
});
// change column type to number
$('body').on('click', '.nbr-col', function(event) {
var filter = /^[0-9]*$/g;
var cond = false;
var min = prompt('Valeur minimum :');
while (cond == false) {
if (min.match(filter)) {
cond = true;
} else {
var min = prompt('Valeur minimum incorrect, réessayez :');
}
}
var cond = false;
var max = prompt('Valeur maximum :');
while (cond == false) {
if (max.match(filter)) {
cond = true;
} else {
var max = prompt('Valeur maximum incorrect, réessayez :');
}
}
let ndx = $(this).parent().index() + 1;
let inputsCol = $('.table tbody tr td:nth-child(' + ndx + ') input');
inputsCol.attr("type", "number").prop("min", min).prop("max", max);
//console.log("inputs modified, example:", inputsCol2[0])
});
// remove column
$('body').on('click', '.remove-col', function(event) {
// Get index of parent TD among its siblings (add one for nth-child)
var ndx = $(this).parent().index() + 1;
// Find all TD elements with the same index
$('th', event.delegateTarget).remove(':nth-child(' + ndx + ')');
$('td', event.delegateTarget).remove(':nth-child(' + ndx + ')');
});
});
$(document).ready(function(){
$('#btn_login_details').click(function(){
var error_date = '';
var error_titre = '';
var error_entreprise = '';
var error_conseiller = '';
var filter = /^([0-2][0-9]|(3)[0-1])(\/)(((0)[0-9])|((1)[0-2]))(\/)\d{4}$/;
if($.trim($('#titre').val()).length == 0)
{
error_titre = 'Titre requis !';
$('#error_titre').text(error_titre);
$('#titre').addClass('has-error');
}
else
{
error_titre = '';
$('#error_titre').text(error_titre);
$('#titre').removeClass('has-error');
}
if($.trim($('#entreprise').val()).length == 0)
{
error_entreprise = 'Nom de l\'entreprise requis !';
$('#error_entreprise').text(error_entreprise);
$('#entreprise').addClass('has-error');
}
else
{
error_entreprise = '';
$('#error_entreprise').text(error_entreprise);
$('#entreprise').removeClass('has-error');
}
if($.trim($('#conseiller').val()).length == 0)
{
error_conseiller = 'Nom du conseiller requis !';
$('#error_conseiller').text(error_conseiller);
$('#conseiller').addClass('has-error');
}
else
{
error_conseiller = '';
$('#error_conseiller').text(error_conseiller);
$('#conseiller').removeClass('has-error');
}
if($.trim($('#date').val()).length == 0)
{
error_date = 'Date requise !';
$('#error_date').text(error_date);
$('#date').addClass('has-error');
}
else
{
if (!filter.test($('#date').val()))
{
error_date = 'Date invalide';
$('#error_date').text(error_date);
$('#date').addClass('has-error');
}
else
{
error_date = '';
$('#error_date').text(error_date);
$('#date').removeClass('has-error');
}
}
if((error_titre != '') || (error_conseiller != '') || (error_entreprise != '') || (error_date != ''))
{
return false;
}
else
{
$('#list_login_details').removeClass('active active_tab1');
$('#list_login_details').removeAttr('href data-toggle');
$('#login_details').removeClass('active');
$('#list_login_details').addClass('inactive_tab1');
$('#list_personal_details').removeClass('inactive_tab1');
$('#list_personal_details').addClass('active_tab1 active');
$('#list_personal_details').attr('href', '#personal_details');
$('#list_personal_details').attr('data-toggle', 'tab');
$('#personal_details').addClass('active in');
}
});
$('#previous_btn_personal_details').click(function(){
$('#list_personal_details').removeClass('active active_tab1');
$('#list_personal_details').removeAttr('href data-toggle');
$('#personal_details').removeClass('active in');
$('#list_personal_details').addClass('inactive_tab1');
$('#list_login_details').removeClass('inactive_tab1');
$('#list_login_details').addClass('active_tab1 active');
$('#list_login_details').attr('href', '#login_details');
$('#list_login_details').attr('data-toggle', 'tab');
$('#login_details').addClass('active in');
});
$('#btn_gen_grille').click(function() {
// Générer la grille
// Ici
});
$('#btn_personal_details').click(function(){
$('#list_personal_details').removeClass('active active_tab1');
$('#list_personal_details').removeAttr('href data-toggle');
$('#personal_details').removeClass('active');
$('#list_personal_details').addClass('inactive_tab1');
$('#list_contact_details').removeClass('inactive_tab1');
$('#list_contact_details').addClass('active_tab1 active');
$('#list_contact_details').attr('href', '#contact_details');
$('#list_contact_details').attr('data-toggle', 'tab');
$('#contact_details').addClass('active in');
});
$('#previous_btn_contact_details').click(function(){
$('#list_contact_details').removeClass('active active_tab1');
$('#list_contact_details').removeAttr('href data-toggle');
$('#contact_details').removeClass('active in');
$('#list_contact_details').addClass('inactive_tab1');
$('#list_personal_details').removeClass('inactive_tab1');
$('#list_personal_details').addClass('active_tab1 active');
$('#list_personal_details').attr('href', '#personal_details');
$('#list_personal_details').attr('data-toggle', 'tab');
$('#personal_details').addClass('active in');
});
$('#btn_contact_details').click(function(){
var error_address = '';
var error_mobile_no = '';
var mobile_validation = /^\d{10}$/;
if($.trim($('#address').val()).length == 0)
{
error_address = 'Address is required';
$('#error_address').text(error_address);
$('#address').addClass('has-error');
}
else
{
error_address = '';
$('#error_address').text(error_address);
$('#address').removeClass('has-error');
}
if($.trim($('#mobile_no').val()).length == 0)
{
error_mobile_no = 'Mobile Number is required';
$('#error_mobile_no').text(error_mobile_no);
$('#mobile_no').addClass('has-error');
}
else
{
if (!mobile_validation.test($('#mobile_no').val()))
{
error_mobile_no = 'Invalid Mobile Number';
$('#error_mobile_no').text(error_mobile_no);
$('#mobile_no').addClass('has-error');
}
else
{
error_mobile_no = '';
$('#error_mobile_no').text(error_mobile_no);
$('#mobile_no').removeClass('has-error');
}
}
if(error_address != '' || error_mobile_no != '')
{
return false;
}
else
{
$('#btn_contact_details').attr("disabled", "disabled");
$(document).css('cursor', 'prgress');
$("#register_form").submit();
}
});
});
/* Style the header with a grey background and some padding */
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
.contenuaccueil {
text-align: center;
position : absolute;
width : 100%;
color : black;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.background
{
margin-top : 10%;
margin-bottom : 10%;
position:relative;
text-align: center;
}
.img
{
background-repeat: repeat-x;
width: 100%;
height: auto;
text-align: center;
}
footer {
text-align : center;
padding-top: 10px;
padding-bottom: 0px;
bottom:0;
width:100%;
color : #A5A5A5;
font-family : "Lato", sans-serif;
font-size : 15px;
font-weight : 400;
text-transform : uppercase;
text-decoration : none;
letter-spacing : 3px;
}
.box
{
width:800px;
margin:0 auto;
}
.active_tab1
{
background-color:#fff;
color:#333;
font-weight: 600;
}
.inactive_tab1
{
background-color: #f5f5f5;
color: #333;
cursor: not-allowed;
}
.has-error
{
border-color:#cc0000;
background-color:#ffff99;
}
/* Styles go here */
.table-content {
padding: 20px;
}
.form-control {
width: 90px;
}
/* Style buttons */
.ajout-lig,.ajout-col {
background-color: DodgerBlue; /* Blue background */
border: none; /* Remove borders */
color: white; /* White text */
padding: 12px 16px; /* Some padding */
font-size: 16px; /* Set a font size */
cursor: pointer; /* Mouse pointer on hover */
border-radius: 5px;
}
/* Darker background on mouse-over */
.ajout-lig:hover,.ajout-col:hover {
background-color: RoyalBlue;
}
<html>
<head>
<title>Innovatech</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/custom.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://kit.fontawesome.com/38b99a3f0e.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Titre + Menu -->
<div class="header">
Innovatech
<div class="header-right">
Accueil
<a class="active" href="ajout.php">Nouveau</a>
Modifier
Mode d'emploi
</div>
</div>
<!-- Contenu du site web -->
<div class="contenu">
<br />
<div class="container box">
<br />
<h2 align="center">Ajout d'un nouvel audit</h2><br />
<?php echo $message; ?>
<form method="post" id="register_form">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active_tab1" style="border:1px solid #ccc" id="list_login_details">Informations à propos de l'entreprise</a>
</li>
<li class="nav-item">
<a class="nav-link inactive_tab1" id="list_personal_details" style="border:1px solid #ccc">Grille d'audit</a>
</li>
<li class="nav-item">
<a class="nav-link inactive_tab1" id="list_contact_details" style="border:1px solid #ccc">Génération des graphiques</a>
</li>
</ul>
<div class="tab-content" style="margin-top:16px;">
<div class="tab-pane active" id="login_details">
<div class="panel panel-default">
<div class="panel-heading">Informations à propos de l'entreprise</div>
<div class="panel-body">
<div class="form-group">
<label>Titre de l'audit</label>
<input type="text" name="titre" id="titre" class="form-control" />
<span id="error_titre" class="text-danger"></span>
</div>
<div class="form-group">
<label>Nom de l'entreprise</label>
<input type="text" name="entreprise" id="entreprise" class="form-control" />
<span id="error_entreprise" class="text-danger"></span>
</div>
<div class="form-group">
<label>Nom du conseiller</label>
<input type="text" name="conseiller" id="conseiller" class="form-control" />
<span id="error_conseiller" class="text-danger"></span>
</div>
<div class="form-group">
<label>Date de l'interview (jj/mm/aaaa)</label>
<input type="text" name="date" id="date" class="form-control" />
<span id="error_date" class="text-danger"></span>
</div>
<br />
<div align="center">
<button type="button" name="btn_login_details" id="btn_login_details" class="btn btn-info btn-lg">Suivant</button>
</div>
<br />
</div>
</div>
</div>
<div class="tab-pane fade" id="personal_details">
<div class="panel panel-default">
<div class="panel-heading">Grille d'audit</div>
<div class="panel-body">
<div class="table-content">
<button class="ajout-col"><i class="fas fa-columns"> Ajouter une colonne</i></button>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th></th>
<th>
<button class="btn"><i class="fas fa-trash remove-col"></i></button>
<button class="btn"><i class="fas fa-text-height text-col"></i></button>
<button class="btn"><i class="fas fa-sort-numeric-down nbr-col"></i></button>
<input type="text" class="form-control">
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<button class="btn"><i class="fas fa-trash remove-row"></i></button>
</td>
<td>
<input type="text" class="form-control">
</td>
</tr>
</tbody>
</table>
</div>
<button class="ajout-lig"><i class="fas fa-list-ul"> Ajouter une ligne</i></button>
</div>
<br />
<div align="center">
<button type="button" name="previous_btn_personal_details" id="previous_btn_personal_details" class="btn btn-default btn-lg">Précédent</button>
<button type="button" name="btn_personal_details" id="btn_personal_details" class="btn btn-info btn-lg">Suivant</button>
</div>
<br />
</div>
</div>
</div>
<!--A MODIFIER - PARTIE SUR LES GRAPHIQUES-->
<div class="tab-pane fade" id="contact_details">
<div class="panel panel-default">
<div class="panel-heading">Fill Contact Details</div>
<div class="panel-body">
<div class="form-group">
<label>Enter Address</label>
<textarea name="address" id="address" class="form-control"></textarea>
<span id="error_address" class="text-danger"></span>
</div>
<div class="form-group">
<label>Enter Mobile No.</label>
<input type="text" name="mobile_no" id="mobile_no" class="form-control" />
<span id="error_mobile_no" class="text-danger"></span>
</div>
<br />
<div align="center">
<button type="button" name="previous_btn_contact_details" id="previous_btn_contact_details" class="btn btn-default btn-lg">Précédent</button>
<button type="button" name="btn_contact_details" id="btn_contact_details" class="btn btn-success btn-lg">Enregistrer</button>
</div>
<br />
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- Le pied de page -->
<footer>
<p>
Innovatech <?php echo date("Y");?> - All rights reserved
</p>
</footer>
<script src="jss/ajout.js"></script>
<script src="jss/gengrille.js"></script>
</body>
</html>

This happens because a button with no type attribute acts as type="submit" and also try to submit the form data to server and refresh the page finally. Please try to set the type to the buttons like type="button" for no page refreshes.
<button class="ajout-col" type="button">
<i class="fas fa-columns"> Ajouter une colonne</i>
</button>

Replace <button class="ajout-lig"><i class="fas fa-list-ul"> Ajouter une ligne</i></button>
to
<button class="ajout-lig" type="button"><i class="fas fa-list-ul"> Ajouter une ligne</i></button>
I think this problem is due to, these buttons are actually submitting the form. if we doesn't specify the button type, it will take as a submit type button

How to expand the nearest div when click on the plus sign using jquery?

I have a plus sign and when the user clicks on plus then it will display the div which displays none on page load. I mean I have to display the div where the class is viewMoreStatus.
I tried the below code but it's not working.
$('.expandExtra').click(function(e) {
e.preventDefault();
var $this = $(this);
$(".expandExtra").removeClass('change_sign');
if ($this.find('.viewMoreStatus').hasClass('show')) {
$this.removeClass('change_sign');
$this.find('.viewMoreStatus').removeClass('show');
$this.parents('.custom_fields').find('editLeadFileStatus').find('viewMoreStatus').slideDown();
} else {
$this.addClass('change_sign');
$this.parents('.custom_fields').find('editLeadFileStatus').find('viewMoreStatus').slideDown();
}
});
.viewMoreStatus {
display: none
}
.editLeadFileStatus span.expandExtra::before {
content: "\f055";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
display: inline-block;
}
.editLeadFileStatus span.expandExtra.change_sign::before {
content: "\f056";
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<div class="custom_fields medication_info" id="custom_fields">
<div class="row editLeadFileStatus">
<span class="expandExtra"></span>
<h2>Testing1</h2>
<h3>Testing1</h3>
<div class="viewMoreStatus">hide on page load and display on click</div>
</div>
<div class="row editLeadFileStatus">
<span class="expandExtra"></span>
<h2>Testing2</h2>
<h3>Testing2</h3>
<div class="viewMoreStatus">hide on page load and display on click</div>
</div>
<div class="row editLeadFileStatus">
<span class="expandExtra"></span>
<h2>Testing3</h2>
<h3>Testing3</h3>
<div class="viewMoreStatus">hide on page load and display on click</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

You can do something below with use of show() and hide()
$('.expandExtra').click(function(e) {
e.preventDefault();
$('.viewMoreStatus').hide();
var $this = $(this);
$(".expandExtra").removeClass('change_sign');
if ($this.find('.viewMoreStatus').hasClass('show')) {
$this.removeClass('change_sign');
$this.find('.viewMoreStatus').removeClass('show');
$this.parents('.custom_fields').find('editLeadFileStatus').find('viewMoreStatus').slideDown();
$this.siblings('.viewMoreStatus').hide();
} else {
$this.addClass('change_sign');
$this.parents('.custom_fields').find('editLeadFileStatus').find('viewMoreStatus').slideDown();
$this.siblings('.viewMoreStatus').show();
}
});
.viewMoreStatus {
display: none
}
.editLeadFileStatus span.expandExtra::before {
content: "\f055";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
display: inline-block;
}
.editLeadFileStatus span.expandExtra.change_sign::before {
content: "\f056";
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<div class="custom_fields medication_info" id="custom_fields">
<div class="row editLeadFileStatus">
<span class="expandExtra"></span>
<h2>Testing1</h2>
<h3>Testing1</h3>
<div class="viewMoreStatus">hide on page load and display on click</div>
</div>
<div class="row editLeadFileStatus">
<span class="expandExtra"></span>
<h2>Testing2</h2>
<h3>Testing2</h3>
<div class="viewMoreStatus">hide on page load and display on click</div>
</div>
<div class="row editLeadFileStatus">
<span class="expandExtra"></span>
<h2>Testing3</h2>
<h3>Testing3</h3>
<div class="viewMoreStatus">hide on page load and display on click</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

You have several issues in your code. You are targeting the parent (.custom_fields) of all elements, you should target only the parent of clicked element (.editLeadFileStatus). You can check the visibility of the element with :visible selector.
Try the following way:
$('.expandExtra').click(function(e) {
e.preventDefault();
var $this = $(this);
//if want it like accordion
//$('.expandExtra').removeClass('change_sign');
//else
$this.removeClass('change_sign');
if ($this.parent().find('.viewMoreStatus').is(':visible')) {
$this.removeClass('change_sign');
$this.parent().find('.viewMoreStatus').slideUp();
} else {
$this.addClass('change_sign');
// slideup all other if want it like accordion
//$('.viewMoreStatus').not($this.parent().find('.viewMoreStatus')).slideUp();
$this.parent().find('.viewMoreStatus').slideDown();
}
});
.viewMoreStatus {
display: none
}
.editLeadFileStatus span.expandExtra::before {
content: "\f055";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
display: inline-block;
}
.editLeadFileStatus span.expandExtra.change_sign::before {
content: "\f056";
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<div class="custom_fields medication_info" id="custom_fields">
<div class="row editLeadFileStatus">
<span class="expandExtra"></span>
<h2>Testing1</h2>
<h3>Testing1</h3>
<div class="viewMoreStatus">hide on page load and display on click</div>
</div>
<div class="row editLeadFileStatus">
<span class="expandExtra"></span>
<h2>Testing2</h2>
<h3>Testing2</h3>
<div class="viewMoreStatus">hide on page load and display on click</div>
</div>
<div class="row editLeadFileStatus">
<span class="expandExtra"></span>
<h2>Testing3</h2>
<h3>Testing3</h3>
<div class="viewMoreStatus">hide on page load and display on click</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

this is how you can update your code with slidedown and slide up
$('.expandExtra').click(function(e) {
e.preventDefault();
var $this = $(this);
$(".expandExtra").removeClass('change_sign');
if ($this.parent().find('.viewMoreStatus').hasClass('show')) {
$this.removeClass('change_sign');
$this.parent().find('.viewMoreStatus').slideUp();
$this.parent().find('.viewMoreStatus').removeClass("show");
} else {
$this.addClass('change_sign');
$this.parent().find('.viewMoreStatus').slideDown();
$this.parent().find('.viewMoreStatus').addClass("show");
}
});
})

$('.expandExtra').click(function(e) {
e.preventDefault();
var $this = $(this);
$(".expandExtra").removeClass('change_sign');
if ($this.find('.viewMoreStatus').hasClass('show')) {
$this.toggleClass('change_sign');
$this.find('.viewMoreStatus').slideUp();
} else {
$this.toggleClass('change_sign');
$('.viewMoreStatus').slideUp()
$this.siblings('.viewMoreStatus').slideDown()
}
});
.viewMoreStatus {
display: none
}
.editLeadFileStatus span.expandExtra::before {
content: "\f055";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
display: inline-block;
}
.editLeadFileStatus span.expandExtra.change_sign::before {
content: "\f056";
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<div class="custom_fields medication_info" id="custom_fields">
<div class="row editLeadFileStatus">
<span class="expandExtra"></span>
<h2>Testing1</h2>
<h3>Testing1</h3>
<div class="viewMoreStatus">hide on page load and display on click</div>
</div>
<div class="row editLeadFileStatus">
<span class="expandExtra"></span>
<h2>Testing2</h2>
<h3>Testing2</h3>
<div class="viewMoreStatus">hide on page load and display on click</div>
</div>
<div class="row editLeadFileStatus">
<span class="expandExtra"></span>
<h2>Testing3</h2>
<h3>Testing3</h3>
<div class="viewMoreStatus">hide on page load and display on click</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Simplify the classes (not everything needs a class and id is practically useless),
Use .toggleClass() to switch between .expand and .collapse classes for .icon (use one unchanging class: .icon, and two alternating classes: .expand, and .collapse)
Use .slideToggle() for the .status expansion and collapse.
$('.icon') is $(this). Reference $(this) as the starting point when traversing from $(this) up to the header.title (via .closest()) then to the .next() section.status
Details commented in demo
// Click any .icon
$('.icon').on('click', function(e) {
// Toggle that specific .icon classes .expand and .collapse
$(this).toggleClass('expand collapse');
/*
Then go up to that specific .icon parent .title then go to that
.title next .status and toggle it up or down
*/
$(this).closest('.title').next('.status').slideToggle('fast');
});
:root {
font: 400 3vw/1.2 Arial
}
h1 {
font-size: 1.65rem
}
h2 {
font-size: 1.5rem
}
h3 {
font-size: 1.35rem
}
h4 {
font-size: 1.2rem
}
hr {
margin-top: 8vh
}
header,
article {
margin-left: 3vw
}
header h2 {
margin-left: -2.25vw
}
header>p {
margin: -4vh 0;
}
/*
Apply the CSS properties/values that do not change to the base class
*/
.icon {
text-indent: -3.75vw;
cursor: pointer;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-style: normal;
display: inline-block;
}
/*
Apply the CSS properties with alternating values to the switching classes
*/
.expand::before {
content: "\f055";
}
.collapse::before {
content: "\f056";
}
.status {
display: none;
margin-left: 3vw
}
.status h4 {
margin-bottom: -1vh
}
.status p {
margin-bottom: 1vh
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<main class="medication-info">
<header>
<h1>Medication Information</h1>
</header>
<hr>
<article>
<header class='title'>
<h2><i class='icon expand'></i> Oxycodone</h2>
<p><b>Brand name:</b> Oxycontin</p>
<h3>Narcotic</h3>
<p>It can treat moderate to severe pain.</p>
</header>
<section class="status">
<h4>Controlled Substance</h4>
<p>High risk for addiction and dependence. Can cause respiratory distress and death when taken in high doses or when combined with other substances, especially alcohol.</p>
More info
</section>
</article>
<hr>
<article>
<header class='title'>
<h2><i class='icon expand'></i> Methylphenidate</h2>
<p><b>Brand name:</b> Ritalin</p>
<h3>Stimulant</h3>
<p>It can treat ADHD and narcolepsy.</p>
</header>
<section class="status">
<h4>Controlled Substance</h4>
<p>Can cause rapid or irregular heartbeat, delirium, panic, psychosis, and heart failure.</p>
<a href='http://www.drugfree.org/drug-guide/prescription-stimulants?utm_source=google&utm_medium=kp&utm_campaign=stimulants'>More info</a>
</section>
</article>
<hr>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

You need to check child of parent here
$('.expandExtra').click(function(e) {
e.preventDefault();
var $this = $(this);
$(".expandExtra").removeClass('change_sign');
if ($this.parent().find('div.viewMoreStatus').hasClass('show')) {
$this.removeClass('change_sign');
$this.parent().find('.viewMoreStatus').hide();
$this.parent().find('.viewMoreStatus').removeClass("show");
} else {
$this.addClass('change_sign');
$this.parent().find('.viewMoreStatus').show();
$this.parent().find('.viewMoreStatus').addClass("show");
}
});
.viewMoreStatus {
display: none
}
.editLeadFileStatus span.expandExtra::before {
content: "\f055";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
display: inline-block;
}
.editLeadFileStatus span.expandExtra.change_sign::before {
content: "\f056";
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<div class="custom_fields medication_info" id="custom_fields">
<div class="row editLeadFileStatus">
<span class="expandExtra"></span>
<h2>Testing1</h2>
<h3>Testing1</h3>
<div class="viewMoreStatus">hide on page load and display on click</div>
</div>
<div class="row editLeadFileStatus">
<span class="expandExtra"></span>
<h2>Testing2</h2>
<h3>Testing2</h3>
<div class="viewMoreStatus">hide on page load and display on click</div>
</div>
<div class="row editLeadFileStatus">
<span class="expandExtra"></span>
<h2>Testing3</h2>
<h3>Testing3</h3>
<div class="viewMoreStatus">hide on page load and display on click</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

How to correctly place .addClass and .removeClass in Modal Box?

The problem is that I have been made aware that I should stop using .hide and .show within my javascript. Now I have learned that a better alternative is to use .addClass and .removeClass as this provides better control and more stylizing.
However for some reason the code is not working. Could I please get help?
I have replaced the previous .hide and .show with the new .addClass and .removeClass, I have provided a new class named showme and even css to display the code as a block.
var content = "";
$('a[href="#ex5"]').click(function(event) {
event.preventDefault();
$(this).modal({
escapeClose: false,
clickClose: false,
showClose: false,
});
$('#myDiv, #myDivs').hide();
$('input[type=checkbox]').prop('checked', false);
});
$('.yourCheckbox, .yourCheckboxx').change(function() {
if ($(this).prop("checked")) {
$("#" + $(this).data('target')).addClass('showme');
content = $("#" + $(this).data('target')).html();
} else {
$("#" + $(this).data('target')).removeClass('showme');
content = "";
}
});
$('[rel="modal:close"]').on('click', () => {
$('.btn').parent().append(content);
})
.onlyThese {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="checkbox"]+label {
color: blue
}
input[type="checkbox"] {
display: none
}
input[type="checkbox"]:checked+label {
color: red
}
}
input:focus {
outline: none;
}
.showme {
display: block;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<p>
<a class="btn" href="#ex5">Sectors </a>
</p>
<div id="ex5" ; class="modal" ; style="background-color:white">
<div style="float:left;">
<p>
<input type="checkbox" id="group1" class="yourCheckbox" data-target="myDiv" checked="checked">
<label for="group1" class="onlyThese">Publication </label>
</p>
<div id="myDiv" class="showme"> blastoise </div>
<p>
<input type="checkbox" id="group2" class="yourCheckboxx" data-target="myDivs" checked="checked">
<label for="group2" class="onlyThese">Food </label>
</p>
<div id="myDivs" class="showme"> water </div>
</div>
<div>
<div>
<p style="float:right">
<b>Apply</b>
</p>
</div>
</div>
All I want is for the code to work the way it used to with .hide and .show but instead now using .addClass and .removeClass.

You may have to remove and add class in different conditions or you could use toggleClass using .hideme class instead of .showme:
var content = "";
$('a[href="#ex5"]').click(function(event) {
event.preventDefault();
$(this).modal({
escapeClose: false,
clickClose: false,
showClose: false,
});
$('#myDiv, #myDivs').addClass('hideme');
$('input[type=checkbox]').prop('checked', false);
});
$('.yourCheckbox, .yourCheckboxx').change(function() {
if ($(this).prop("checked")) {
//$("#" + $(this).data('target')).removeClass('hideme');
content = $("#" + $(this).data('target')).html();
} else {
//$("#" + $(this).data('target')).addClass('hideme');
content = "";
}
$("#" + $(this).data('target')).toggleClass('hideme');
});
$('[rel="modal:close"]').on('click', () => {
$('.btn').parent().append(content);
})
.onlyThese {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="checkbox"]+label {
color: blue
}
input[type="checkbox"] {
display: none
}
input[type="checkbox"]:checked+label {
color: red
}
}
input:focus {
outline: none;
}
.hideme {
display: none;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<p>
<a class="btn" href="#ex5">Sectors </a>
</p>
<div id="ex5" ; class="modal" ; style="background-color:white">
<div style="float:left;">
<p>
<input type="checkbox" id="group1" class="yourCheckbox" data-target="myDiv" checked="checked">
<label for="group1" class="onlyThese">Publication </label>
</p>
<div id="myDiv" class="showme"> blastoise </div>
<p>
<input type="checkbox" id="group2" class="yourCheckboxx" data-target="myDivs" checked="checked">
<label for="group2" class="onlyThese">Food </label>
</p>
<div id="myDivs" class="showme"> water </div>
</div>
<div>
<div>
<p style="float:right">
<b>Apply</b>
</p>
</div>
</div>