0

Goal:
I want to hide the alphabet "a b c d" and when it is hidden, the arrow shall display with arrow down. https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_down_alt1-16.png.

It should be a default settings.

When you press the "Hide Text" you toggle out and change the arrow botton into upp and display the text and also you change the text from "Hide Text" into "Show Text"

https://jsfiddle.net/mxt2pthw/15/

var flip = 0;
$('#test ').click(function() {
  $( "#aaa" ).toggle( flip++ % 2 === 0 );
});
<div id="aaa">
a <br/>
b <br/>
c <br/>
d <br/>   
    
 
</div>

<div id="test">
    Test <img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_up_alt1-16.png" />
</div>
HelloWorld1
  • 13,688
  • 28
  • 82
  • 145

4 Answers4

3

You can create a css class to rotate the image using rotate and in js using toggleClass:

$('#test').click(function() {
  $("#aaa").toggle();
  $(this).find("img").toggleClass("hide");
});
.hide {
  /* Firefox */
  -moz-transform: rotate(180deg);
  /* Safari and Chrome */
  -webkit-transform: rotate(180deg);
  /* Opera */
  -o-transform: rotate(180deg);
  /* IE9 */
  -ms-transform: rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aaa">a
  <br/>b
  <br/>c
  <br/>d
  <br/>
</div>
<div id="test">Test
  <img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_up_alt1-16.png" />
</div>
Alex Char
  • 32,879
  • 9
  • 49
  • 70
  • Yes check this [http://stackoverflow.com/questions/11832131/cross-browser-way-to-rotate-image-using-css](http://stackoverflow.com/questions/11832131/cross-browser-way-to-rotate-image-using-css) – Alex Char Sep 03 '15 at 11:49
  • Thank you for your help! As a default when you load this page, the text shall be hidden, not displayed. Is it possible to do it? – HelloWorld1 Sep 03 '15 at 11:50
  • That example you linked includes a lot more CSS to do that with all browsers –  Sep 03 '15 at 11:51
  • @HelloWorld Yes, checout this [fiddle](https://jsfiddle.net/npu2ncyc/). Adding `hide` class to `img` element. – Alex Char Sep 03 '15 at 11:53
  • Another thing. How about enable to change it from "Hide text" to "Show text"? – HelloWorld1 Sep 03 '15 at 11:55
  • Thank your for your help! Alex. Is it possible to have two picture instead of one because I gonna have 2 different picture? – HelloWorld1 Sep 03 '15 at 12:06
  • Then you can use @Popnoodles solution :) – Alex Char Sep 03 '15 at 12:07
2

https://jsfiddle.net/mxt2pthw/20/

I find the simplest way is to include both images and hide one, then just toggle both on click

<div id="test">
    Test 
    <img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_up_alt1-16.png" />
    <img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_down_alt1-16.png" style="display: none" />
</div>

In your demo your calculation is inverted to how the data is displayed on load. Added trigger click as per extra question.

$('#test ').click(function() {
    $( "#aaa" ).toggle( flip++ % 2 !== 0 ); // <-- i switched this for the example
    $(this).find('img').toggle();
}).trigger('click'); // trigger on page load
Popnoodles
  • 28,090
  • 2
  • 45
  • 53
  • Thank you for your help! As a default when you load this page, the text shall be hidden, not displayed. Is it possible to do it? – HelloWorld1 Sep 03 '15 at 11:50
  • Sure, just append `.trigger('click');` so that it runs on load, correcting what's shown. I'll update – Popnoodles Sep 03 '15 at 11:52
  • One more thing, I also would like to change the text from "Show Info" to "HIde Info" when you press on the link? Do you have the updated the jsfiddle? – HelloWorld1 Sep 03 '15 at 11:57
  • 1
    So **learn from what I've shown you** and apply it to text as well. – Popnoodles Sep 03 '15 at 12:43
0

You can try this approach :

var flip = 0;
$('#test').click(function() {
  $( "#aaa" ).toggle('slow',function(){
      if(flip++ % 2 === 0){
            $("#arrow").attr("src","https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_down_alt1-16.png");
      }else{
            $("#arrow").attr("src","https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_up_alt1-16.png");
      }
  });   
});
Alperen Talaslıoğlu
  • 31
  • 5
0

Try this demo:

$(function(){
  var info = [{txt:'Hide Text', src:'up', fn: 'show'}, {txt:'Show Text', src:'down', fn: 'hide'}];
  var test = $('#test'), aaa = $('#aaa'), span = test.find('span');
  var img = test.find('img'), i = 0, o;
  $('#test').on('click', function(e) {
    i = (i + 1) % info.length;
    o = info[i];
    img.prop('src',"https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_" + o.src + "_alt1-16.png");
    aaa[o.fn]();
    span.text(o.txt);
  }).trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="aaa">
  a
  <br/>b
  <br/>c
  <br/>d
  <br/>
</div>

<div id="test">
  <span></span> 
  <img alt="Loading..." />
</div>