Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Stuart McPherson
Stuart McPherson
15,939 Points

How to change image once div is clicked?

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;
  }

}

1 Answer

Richard Hope
Richard Hope
25,237 Points

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.

Stuart McPherson
Stuart McPherson
15,939 Points

Thanks,

I used your rotate answer but changed it so I got the image by id

<script>
    $( ".cuts-link" ).click(function() {
      $("#arrow1").toggleClass("rotate");
      $( "#cuts" ).toggle();
    }); 
    </script> 
Richard Hope
Richard Hope
25,237 Points

That would also work, but I recommend you have a go at using the same function to handle opening each section.

Stuart McPherson
Stuart McPherson
15,939 Points

Do you have any idea why my 4th expanding div wont open. The 'styling' one. All the others open and close except this one?

Stuart McPherson
Stuart McPherson
15,939 Points

made a stupid mistake actually , please ignore this