J Term - Individual Coding Assignment

Alli

by sk8wt

HTML

<div class="header">
    <h1><em>CHARLOTTESVILLE RESOURCES</em></h1>
  </div>
  <div class="subheader">
    <h2 id=counseling>
      <strong>COUNSELING</strong> - Make an appointment
    </h2>
    <img id=counsel-chev class="chevron" src=https://image.flaticon.com/icons/png/512/120/120902.png width=30px>
  </div>

  <div class=list id=counsel-list>
    <ul>
      <li> 434-295-7273 - Sexual Assault Resource Agency (SARA) </li>
      <li> Ipsum </li>
    </ul>
    </div>

  <div class="subheader">
    <h2>
      <strong>HOTLINES</strong> - Talk to someone now
    </h2>
    <img id=hotline-chev class="chevron" src=https://image.flaticon.com/icons/png/512/120/120902.png width=30px>
  </div>

 <div class=list id=hotline-list>
    <ul>
      <li> 434-293-8509 - The Shelter for Help in Emergency</li>
      <li> 434-977-7273 - Sexual Assault Resource Agency (SARA) </li>
      <li> 800-838-8238 - Virginia Family Violence and Sexual Assault Hotline</li>
    </ul>
    </div>

  <div class="subheader">
    <h2>
      <strong>SHELTER</strong> - A safe place, today
    </h2>
    <img id=shelter-chev class="chevron" src=https://image.flaticon.com/icons/png/512/120/120902.png width=30px>
  </div>

 <div class=list id=shelter-list>
    <ul>
      <li> <a href="https://www.shelterforhelpinemergency.org/shelter-tour"><strong>Shelter for Help in Emergency</strong></a> </li>
      <li> Ipsum </li>
    </ul>
    </div>

CSS

.header {
  text-align: center;
  color: black;
  font-size: 18px;
  font-family: helvetica, sans-serif;
  margin-bottom: 50px;
}

.subheader {
  text-align: left;
  color: White;
  font-size: 14px;
  border-style: Solid;
  border-color: black;
  margin: 20px;
  margin-bottom: -3px;
  background: grey;
  font-family: helvetica, sans-serif;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
}

.chevron {
  height: 30px;
}

.list {
  margin-left: 20px;
  margin-right: 20px;
  padding-left: 15px;
  border-style: solid;
  border-color: black;
  display: none;
  background-color: grey;
  font-family: helvetica, sans-serif;
  font-style: bold;
  color: white;
}

body {
   
background-image: url("http://thehealingcottage.com.au/wp-content/uploads/2018/10/AdobeStock_201314841.jpeg");
background-size: 900px;
}

JavaScript

var deg = 180

$("#counsel-chev").click(function() {
  $("#counsel-list").toggle(400);
  console.log("It clicked");
  
  if (deg == 180) deg = 0
  else deg = 
  
	document.getElementById("counsel-chev").style = 'transform: rotate(' + deg + 'deg)';
});

$("#hotline-chev").click(function() {
  $("#hotline-list").toggle(400);
  console.log("It clicked");
});

$("#shelter-chev").click(function() {
  $("#shelter-list").toggle(400);
  console.log("It clicked");
});