How to change image once div is clicked?

Question

I have a div that when clicked on opens up another div. So basically a tab. Works with javascript toggle. I have a little downwards arrow in the div 'arrow.png'. Once the div is clicked and the other one opens. I want the downwards arrow to be changed to the upwards arrow, 'arrow-up.png'.

Id like this image change to work as a toggle between the up and down arrows. so click to open div and down arrow changes to up. click to close div and up arrow changes to down arrow and carries on like that.

Any help would be appreciated.

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Home</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="css/normalize.css">
  <link href="https://fonts.googleapis.com/css?family=Muli%7CRoboto:400,300,500,700,900" rel="stylesheet"></head>
  <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
  <body>

    <header>
      <div class="main-header">
        <div class="top-head">
          <a name="top" class="name"><h1>Company logo</h1></a>

          <div class="main-nav">
            <ul class="nav">
              <li><a href="index.html"><strong>HOME</strong></a></li>
              <li><a href="#experience"><strong>EXPERIENCE</strong></a></li>
              <li><a href="#services"><strong>SERVICES</strong></a></li>
              <li><a href="#contact"><strong>CONTACT</strong></a></li>
            </ul>
          </div> 
        </div>


      </div>  
    </header>

    <div class="experience">

      <div class="intro">
        <div class="intro1">
          <a name="experience"><img src="img/profile" alt="Profile" class="profile-img"></a>
        </div>
        <div class="intro2">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae auctor lacus. Praesent nec velit sollicitudin, varius est eget, pulvinar nunc. Aliquam imperdiet at nunc quis vehicula. Donec consectetur porttitor elit in vulputate.</p>
        </div>
      </div> 

    </div>

    <div class="main">


      <div class="portfolio">
        <a name="services"><h2>SERVICES & PRICES</h2></a>
        <div class="types">
          <a href=#cuts-box class="cuts-link" name="cuts-box"><img src="img/hairdressing.jpg" alt="Cuts" class="type-img"></a>
          <a href="#cuts-box" class="cuts-link"><div class="description">
            <h4>Cuts</h4>
            <img src="img/arrow.png" alt="Arrow" class="arrow">
          </div></a>
          <div id="cuts">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed bibendum turpis. Curabitur venenatis quis tortor quis eleifend. Proin mauris dolor, mattis eget libero eget, scelerisque pulvinar massa. Sed posuere in tellus id iaculis. Donec ut porttitor elit. Maecenas hendrerit dignissim maximus.</p>
            <h4>Prices</h4>
            <p>£5-£20</p>
          </div>
        </div>
        <div class="types">
          <a href=#colours-box class="colours-link" name="colours-box"><img src="img/hairdressing.jpg" alt="Colours" class="type-img"></a>
          <a href="#colours-box" class="colours-link"><div class="description">
            <h4>Colours</h4>
            <img src="img/arrow.png" alt="Arrow" class="arrow">
          </div></a>
          <div id="colours">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed bibendum turpis. Curabitur venenatis quis tortor quis eleifend. Proin mauris dolor, mattis eget libero eget, scelerisque pulvinar massa. Sed posuere in tellus id iaculis. Donec ut porttitor elit. Maecenas hendrerit dignissim maximus.</p>
            <h4>Prices</h4>
            <p>£5-£20</p>
          </div>
        </div>
        <div class="types">
          <a href=#perms-box class="perms-link" name="perms-box"><img src="img/hairdressing.jpg" alt="Perms" class="type-img"></a>
          <a href="#perms-box" class="perms-link"><div class="description">
            <h4>Perms</h4>
            <img src="img/arrow.png" alt="Arrow" class="arrow">
          </div></a>
          <div id="perms">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed bibendum turpis. Curabitur venenatis quis tortor quis eleifend. Proin mauris dolor, mattis eget libero eget, scelerisque pulvinar massa. Sed posuere in tellus id iaculis. Donec ut porttitor elit. Maecenas hendrerit dignissim maximus.</p>
            <h4>Prices</h4>
            <p>£5-£20</p>
          </div>
        </div>
        <div class="types sec-row">
          <a href=#styling-box class="styling-link" name="styling-box"><img src="img/hairdressing.jpg" alt="Styling" class="type-img"></a>
          <a href="#styling-box" class="styling-link"><div class="description">
            <h4>Styling</h4>
            <img src="img/arrow.png" alt="Arrow" class="arrow">
          </div></a>
          <div id="styling">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed bibendum turpis. Curabitur venenatis quis tortor quis eleifend. Proin mauris dolor, mattis eget libero eget, scelerisque pulvinar massa. Sed posuere in tellus id iaculis. Donec ut porttitor elit. Maecenas hendrerit dignissim maximus.</p>
            <h4>Prices</h4>
            <p>£5-£20</p>
          </div>
        </div>
        <div class="types sec-row">
          <a href=#bridal-box class="bridal-link" name="bridal-box"><img src="img/hairdressing.jpg" alt="Bridal" class="type-img"></a>
          <a href="#bridal-box" class="bridal-link"><div class="description">
            <h4>Bridal</h4>
            <img src="img/arrow.png" alt="Arrow" class="arrow">
          </div></a>
          <div id="bridal">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed bibendum turpis. Curabitur venenatis quis tortor quis eleifend. Proin mauris dolor, mattis eget libero eget, scelerisque pulvinar massa. Sed posuere in tellus id iaculis. Donec ut porttitor elit. Maecenas hendrerit dignissim maximus.</p>
            <h4>Prices</h4>
            <p>£5-£20</p>
          </div>
        </div>
      </div>
    </div>  

    <div class="area">
      <h2></h2>

    </div>

    <footer>
      <a name="contact"><h3>CONTACT</h3></a>
      <p>If you're interested in one of my services or want more information about my work. I'd love to hear from you!</p>
      <p>Phone <strong>+44711 1111 111</strong></p>
      <p>Email <strong>example@outlook.com</strong></p>

      <div class="bot-footer">
        <h4 class="student">Maria's Mobile Hairdressing</h4>

        <div class="footer-nav">
          <ul class="tab-nav">
            <li><a href="index.html"><strong>HOME</strong></a></li>
            <li><a href="#experience"><strong>EXPERIENCE</strong></a></li>
            <li><a href="#services"><strong>SERVICES</strong></a></li>
            <li><a href="#contact"><strong>CONTACT</strong></a></li>
          </ul>
        </div>
        <a href="#top" class="top"><h4>BACK TO TOP</h4></a>
      </div>  
    </footer>

    <script type="text/javascript">
      $( ".cuts-link" ).click(function() {
        $( "#cuts" ).toggle();
      });
    </script> 

    <script type="text/javascript">
      $( ".colours-link" ).click(function() {
        $( "#colours" ).toggle();
      });
    </script> 

    <script type="text/javascript">
      $( ".perms-link" ).click(function() {
        $( "#perms" ).toggle();
      });
    </script>

    <script type="text/javascript">
      $( ".styling-link" ).click(function() {
        $( "#styling" ).toggle();
      });
    </script>

    <script type="text/javascript">
      $( ".bridal-link" ).click(function() {
        $( "#bridal" ).toggle();
      });
    </script>

  </body>
</html>

styles.css

/* Global Layout Set-up */
* { 
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  background-color: #f6f6f6;

}

ul {
  padding: 0;
  margin: 0;
}

img {
  height: auto;
}

h1 {
  color: #3f3f3f;
  margin-top: 20px;
  margin-bottom: 20px;
}

h3 {
  color: #545454;
  margin-top: 10px;
  margin-bottom: 30px;
}

h4, p {
  margin-top: 10px;
  margin-bottom: 20px;
  color: #7e7e7e;
}

h2 {
  color: #7e7e7e;
  margin: 0;
  font-size: 1em;
}

p {

  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 10px;
}

.main {
  background-color: #ffffff;
  overflow: auto;
}

.nav li {
  background-color: #ffffff;
  margin-bottom: 0.5em;
  padding-top: 5px;
  padding-bottom: 5px;
  list-style-type: none;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  border-radius: 3%;  
}

.nav li a {
  color: #545454;
  text-decoration: none;
}

a:hover {
  border-top: 1px solid #545454;
  border-bottom: 1px solid #545454;
}

.main-header {
  overflow: auto;
    border-bottom: 3px solid #330f53;
    margin-bottom: 20px;
}

.profile-img {
  text-align: center;
  width: 60%;
  border-radius: 5px;  
}

.experience {
  margin-bottom: 30px;
  background-color: #fff;
  overflow: auto;
}

.intro p {
  font-weight: 400;
}

.type-img {
  width: 100%;
  border-radius: 5px;
}

.types, footer {
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
}

.types {
  margin-bottom: 50px
}

.description {
  background-color: #330f53;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 5px;
  margin-top: 3px;
  margin-bottom: 0;
  overflow: auto;
}

.description h4 {
  color: #fff;
  font-weight: 400;
  font-size: 1em;
  float: left;
  width: 52%;
  text-align: right;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
}

.description a {
  text-decoration: none;
}

.arrow {
  width: 20px;
  float: left;
  margin-top: 10px;
}

#cuts, #colours, #perms, #styling, #bridal {
  border: 2px solid #330f53;
  border-radius: 5px;
  display: none;
}

.portfolio {
  margin-top: 10%;
  margin-bottom: 10px;
  padding-top:
}

.bot-footer {
  border-top: 1px solid #bdbdbd;
  color: #696969;
}

.student {
  float: left;
}

.top {
  float: right;
  text-decoration: none;
  margin-top: 0;
  color: #696969
}

.footer-nav {
  display: none;
}

.construction {
  font-size: 1.2em;
  margin-top: 50px;
}

.setup {
  width: 96%;
  margin-left: 2%;
  margin-right: 2%;
  background-color: #ffffff;
}

.info {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 40px;
}

/* Media Quieries */

@media screen and (min-width: 720px) {

  .types {
    width: 46%;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
  }

  .portfolio {
    margin: auto;
    background-color: #ffffff;
    overflow: auto;
  }

  .type-img {
    width: 100%;
  }

  .intro {
    overflow: auto;
    text-align: left;
    width: 96%;
    margin-left: 2%;
    margin-right: 2%;
  }

  .intro p {
    margin: 0;
    margin-bottom: 30px;
    margin-top: 30px;
  }

  .intro1 {
    float: right;
    width: 40%;
    text-align: center;
    margin-bottom: 20px;
    background-color: #e9e9e9;

  }

  .intro2 {
    float: left;
    width: 60%;
  }

  .footer-nav {
    display: inline;
    float: right;
    margin-top: 10px;
  }

  .tab-nav li {
    display: inline-block;
    margin-left: 1em;
  }

  .tab-nav li a {
    color: #696969;
    text-decoration: none;
  }

  .nav {
    margin-bottom: 20px;
  }

  .nav li {
    list-style-type: none;
    display: inline-block;
    margin-left: 2%;
    margin-right: 2%; 
    width: 12.5%;
    background-color: #f6f6f6;
  }

  .nav li a {
    color: #545454;
    text-decoration: none;
  }


  a:hover {
    border-top: 1px solid #545454;
    border-bottom: 1px solid #545454
  }

  .top {
    display: none;
  }

  footer {
    clear: both;
  }

  .bot-footer {
    margin-top: 40px;
  }
}

@media screen and (min-width: 1024px) {

  .experience {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
  }

  .types {
    width: 30%;
    margin-left: 1.6%;
    margin-right: 1.7%;
  }

  .portfolio {
    width: 80%;
    margin-left: 10%;
    Margin-right: 10%;
  }

  .main {
    background-color: #f6f6f6;
  }

  .main-header {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
  }

  .name {
    float: left;
  }

  .nav {
    margin-top: 20px;
    float: right;
  }

  .nav li {
    margin-left: 30px;
    margin-right: 30px;
  }



  .intro2 {
    font-size: 1.2em;
  }

}

Answer 1 · 2016-01-25T15:11:13Z

January 25, 2016 3:11pm

Sounds like when you click a div you need to traverse from the clicked element to the arrow image element and replace the value of the src attribute to the other arrow image. Something like:

      $( ".cuts-link" ).click(function() {
        if($(this).children(".arrow").attr("src", "img/arrow.png")) {
        $(this).children(".arrow").attr("src", "img/arrow-up.png");
        } else {
        $(this).children(".arrow").attr("src", "img/arrow.png");
        }
        $( "#cuts" ).toggle();
      });

Not sure if you want to get a bit more advanced, but you could use the click function to toggle adding a class to the arrow image that makes the image rotate whenever the parent div is clicked.

      $( ".cuts-link" ).click(function() {
        $(this).children(".arrow").toggleClass("rotate");
        $( "#cuts" ).toggle();
      });

In the above example "rotate" is a class in css that applies a rotate transform to an element.

Welcome to the Treehouse Community

Looking to learn something new?

Stuart McPherson

Stuart McPherson

How to change image once div is clicked?

1 Answer

Richard Hope

Richard Hope

Stuart McPherson

Stuart McPherson

Richard Hope

Richard Hope

Stuart McPherson

Stuart McPherson

Stuart McPherson

Stuart McPherson