jQuery addClass example

Change class name on click in jQuery

by cwhong

HTML

<div Id ="About-Me">
About Me 
</div>

<div id = "Information-Academic">
Academic Background
</div>

<div id = "Information-Contact">
Contact Me
</div>

<div id = "General-Information">
This blog focuses on city planning and urban issues. Through this blog, I hope to share and reflect upon new ideas and their implementation!
</div>

<hr />

<h1>
Lets Talk About Cities!!
</h1>

<h5>
Urban Planning encompasses many topics with different scope, target groups and implications. Some of these have been discussed below!
</h5>

<div class="Urban-Planning-Themes TOD">
Transit Oriented Development 
</div>

<img class = "Transit-Oriented-Development"
src = "https://smartgrowthamerica.org/wp/wp-content/uploads/tod-light-rail.png">

<div class = "box-Info-TOD">
asdhkasfgkydfgjhf
</div>

<button id="button-1">
Click here for more info on TOD
</button>

<button class="back">
 Back
</button>

<div class="Urban-Planning-Themes CD">
Community Development 
</div>

<img class = "Community-Development"
src ="https://artmuseum.pl/public/upload/photo/0638_0406/57ecdde6a0238.jpg">

<button id="button-2">
Click here for more info on Community Development
</button>

<div class = "Urban-Planning-Themes Street">
Streets for People 
</div>
<img class = "Streets-for-People"
src = "https://www.planetizen.com/files/styles/news_header_sm/public/images/Vancouver3.JPG?itok=v5zGle-g">

<button id="button-3">
Click here for more info on Streets for People
</button>

CSS

#About-Me {
  border: 0.2px dashed;
  min-height: 10px;
  padding: 5px;
 display: inline-block;
 cursor: pointer;
}

#Information-Academic {
  border: 0.2px dashed;
  min-height: 10px;
  padding: 5px;
  display: inline-block;
   margin-left: 80px;
   cursor: pointer;
}

#Information-Contact {
  border: 0.2px dashed;
  min-height: 10px;
  padding: 5px;
  display: inline-block;
  margin-left: 80px;
  cursor: pointer;
}

#General-Information {
  color: #900C3F;
  border: 0.2px dashed;
  min-height: 7px;
  padding: 10px;
  margin-top: 20px;
  font-size: 12px;
}

h1 {
 text-align: center;
 color: #233D72;
}

h5 {
  text-align: center;
  color: #233D72;
}

.Urban-Planning-Themes {
  background: #F38036;
  background-size: px;
  cursor: pointer;
  color: #FFFFFF;
  font-size: 16px;
  padding: 10px;
}

.Urban-Planning-Themes:hover {
  background: grey;
}

#button-1 {
  margin-bottom: 11px;
}

 #button-2 {
  margin-bottom: 11px;
}

#button-3 {
  margin-bottom: 11px;
}

.back {
 text-align: right;
}

.box-Info {
  border: 10px dashed;
  padding: 50px;
  display: none;
}

JavaScript

$('#About-Me').on('click', function() {
  $('#General-Information').text('My name is Kahinee Shah. My interest in urban planning stems from the idea of how cities grow and how a community comes together. Through this blog I hope to dvelve into the various aspects of city planning and  share my perspective about them for a better understanding');$('#About-Me').css('background','#900C3F');$('#About-Me').css('color','#FFFFFF');$('#Information-Contact').css('background','#FFFFFF');$('#Information-Academic').css('background','#FFFFFF');$('#Information-Contact').css('color','#000000');$('#Information-Academic').css('color','#000000')
}); 

$('#Information-Academic').on('click', function() {
  $('#General-Information').text('Masters in Urban Planning at NYU Robert F. Wagner, School of Public Service'); $('#Information-Academic').css('background','#900C3F');$('#Information-Academic').css('color','#FFFFFF');$('#About-Me').css('background','#FFFFFF');$('#About-Me').css('color','#000000');$('#Information-Contact').css('background','#FFFFFF');$('#Information-Contact').css('color','#000000');
}); 

$('#Information-Contact').on('click', function() {
  $('#General-Information').text('Email: [email protected]');$('#Information-Contact').css('background','#900C3F');$('#Information-Contact').css('color','#FFFFFF');$('#Information-Academic').css('background','#FFFFFF');$('#About-Me').css('background','#FFFFFF');$('#Information-Academic').css('color','#000000');$('#About-Me').css('color','#000000');
});

$('#button-1').on('click', function() {
$('.Transit-Oriented-Development').hide();
$('.box-Info-TOD').show();
});



$('.back').on('click', function(){
$('.Transit-Oriented-Development').show();
});