Mason HTML101

by markjkoop

HTML

<p><img src="http://imagecache.artistrising.com/artwork/lrg/0/78/KFTD000A.jpg" width="200"/>
<img src="http://stmedia.startribune.com/images/ows_145342165191280.jpg" width="350">
<p id="first">would you like to check out some musky shops and websites? well this is the place for you!</p>
<img src="http://i.ebayimg.com/images/i/281036176128-0-1/s-l1000.jpg" width="190"/>
<p><a href="https://www.muskytackleonline.com/index.php?route=common/home">musky tackle online</a></p>
<a href="https://www.handlebarzfishing.com/">handlebarz</a>
<p><a href="https://teamrhinooutdoors.com/">team rhino outdoors</a></p>
<img src="http://www.animalspot.net/wp-content/uploads/2016/07/Black-Rhinoceros-Pictures.jpg" width="350"/>
<p><a href="https://bassmagnetlures-waterwolflures.com/product/shadzilla/">waterwolf shadzillaz</a></p>
<br/><br/>
<p class="words">if you liked it so far you are in for a big treat because...</p>
<p class="words">here are some of our personal best fish!</p>
<table>
<tr>
  <td>pb fish</td><td>mason</td><td>cole</td><td>dad</td>
</tr>
<tr>

<td><img src="https://tse3.mm.bing.net/th?id=OIP.HF4a822kHY0AttaDvA1e2gHaC1&pid=Api"width="150"/></td><td><b>29.50"</b></td><td>26"</td><td>26"</td>
</tr>
<tr>
  <td><p><img src="http://mikehulbert.com/images/website8.jpg" width="150"/></p></td><td> --- </td><td>31"</td><td><b>45"</b></td>
</tr>
<tr>
<td><img src="http://stmedia.startribune.com/images/ows_139492577649723.jpg" width="150"/></td><td> --- </td><td><b>12"</b></td><td> --- </td>
</tr>
<tr>
<td><img src="http://www.realfishin.com/images/species/smallmouth_bass.jpg" width="170"/></td><td>16"</td><td>18"</td><td><b>21.75"</b></td>
  </tr>
</table>
<p id="musky">musky information</p>
<div class="clicker" id="accordion">Musky Description  [+]</div>
<div class="opener" style="display: none;  background-color:#24c704; border:10px groove #115903; width:150px">A musky is a long fish. they are a light grey or sometimes dark green. They have big heads with really sharp...

CSS

#first{
    color: #31bf15;
    font-weight: bold;
     font-style: italic;
     border: 10px groove #940606;
     background-color: #070d45;
  }
  body{ background-color:#17ebb9;
  }
  a{
    color: #006aff;
    text-decoration:none;
    font-size:18px;
  }
  a:hover{
    font-weight:bold;
    text-decoration:underline overline;
    font-size:20px;
  }
  table{
    border:20px dotted #c7505f;
  }
 #musky{
   color:#3c571c;
   font-size:50px;
   width:100%;
   text-align: center;
 }
 img{
   border:5px groove #43fc00;
 }
 table:hover{
   border:20px groove #fc7200;
 }
 .words{
   width:100%;
   text-align: center;
   color: #091369;
   font-size:30px;
   font-style: italic;
   font-weight:bold;
 }
 #baits{
   font-weight: bold;
   font-size: 27px;
   font-style: italic;
   color:#4a0338;
 }

JavaScript

$( ".clicker" ).click(function() {

var openclose = $(".clicker").html();

//alert(openclose);

if(openclose == 'Musky Description  [+]'){
			$(".clicker").html('Musky Description  [-]');
}else{
			$(".clicker").html('Musky Description  [+]');
}

$(".opener").slideToggle();
});


$(".cllicker").click(function() {
var closeopen = $(".cllicker").html();
if(closeopen == 'recomended baits from handlebarz  [+]'){
$(".cllicker").html('recomended baits from handlebarz  [-]')
}else{
$(".cllicker").html('recomended baits from handlebarz  [+]');
}

$(".oopener").slideToggle();
});