-2

If you take a look at the dev site here: www.tmwlsh.co.uk/wlsh you will see that there are four boxes. Once you click the down arrow in each box, the arrow changes to an up arrow. The changing of the arrow is all done in jQuery and the 'up arrow div' essentially does not exist in the html.

Once the arrow has changed to down, i want the user to be able to click the up arrow to re-hide the div.. its a little confusing, but if you take a look at the link im sure you will get the gist. www.tmwlsh.co.uk/wlsh

TMWLSH
  • 17
  • 4
  • Welcome to Stack Overflow! Please include the relevant parts of your code in your question, and also mention what you have already tried. – Josh Harrison Jan 26 '16 at 12:05
  • Well, basically you want a so called "accordion" menu. I looked into your JS and it's very redundant, you can achieve your desired functionality in a more elegant code. Look here for examples: http://codepen.io/search/pens?q=accordion&limit=all&type=type-pens – Frank Drebin Jan 26 '16 at 12:08

3 Answers3

0

What you're looking for is probably the jQuery function Toggle.

You can find it on this link: http://api.jquery.com/toggle/

Júlio Pradera
  • 466
  • 2
  • 9
  • 25
0

I would use classes and jQuery to accomplish this. For your arrow, give it a standard background image with the arrow pointing downwards. Every time it is clicked, toggle it's class to 'active' and for the active class, give it a background image with an arrow pointing up. Once you have done this, you can then use jquery to toggle the expansion of the relevant box. Eg;

// CSS
.arrow{background-image: url('downexample.png');}
.arrow.active{background-image: url('upexample.png');}

// jQuery
$('#arrow1').click(function(){
  $(this).toggleClass('active'); // toggle arrow direction
  $('#box1').toggleSlide(); // toggle expansion of the first box
})
Lewis
  • 3,479
  • 25
  • 40
0

I've done something similar to that with a button that changes the text when clicked and shows a div and then hides the div again and changes the button text back. here is the code I've done, since i don't know any of what you have done you'll have to use mine to adapt to yours, next time maybe it would be a good idea showing us your code.

 function showInfo(){
                     var divInfo = document.getElementById("colorInfo");
                     var btnInfo = document.getElementById("btnInfo");
                     if(divInfo.style.display == "none"){
                         divInfo.style.display="block";
                         btnInfo.textContent = "Hide Color Info";
                     }else{
                         divInfo.style.display="none";
                         btnInfo.textContent = "Show Color Info";
                     }
                }
Pizzy
  • 50
  • 9