jquery - Want to Toggle a hidden table, by clicking Toggled (Up/Down arrow images) -


i making web project, , want toggle clicking on image(down arrow image) show table. , (up arrow image) hide table.

i using j query purpose, table toggle working images not working. after first click changes image (source not found image). table works fine.

i sharing code , screen shots of web page. need in matter, kind of assistance appreciable solve problem thanks!.![

    <script type="text/javascript">          $(document).ready(function (e) {              $('#show1').click(function () {                                   if ($("#show1",this).attr("src") == "~/images/arrow1.png")                  {                      $("#show1").attr("src", "~/images/rarrow1.png");                  }                  else {                      $("#show1").attr("src", "~/images/arrow1.png");                  }                      $('#show-list1').toggle("slow");              });          });      </script>
 <img style="margin-left:400px" align="right"  height="20" width="25"  id="show1" src="~/images/arrow1.png" />      // 2nd image source "~/images/rarrow1.png"

]1

i think want this:

demo

$(".displayblock").hide();  $('#togglearrow').click(function () {    var imageelement = document.getelementbyid('togglearrow');    if (imageelement.src.indexof("https://cdn3.iconfinder.com/data/icons/musthave/256/stock%20index%20down.png") != -1) {        $("#togglearrow").attr("src", "https://cdn3.iconfinder.com/data/icons/musthave/256/stock%20index%20up.png");    } else {  	  $("#togglearrow").attr("src", "https://cdn3.iconfinder.com/data/icons/musthave/256/stock%20index%20down.png");    }    $('.displayblock').toggle("slow");  });
#togglearrow {      float:right;      margin-right:40px;  }  img {      width:20px;      height:30px;      cursor:pointer;  }  .displayblock {      position:absolute;      top:100px;      right:15px;      padding:10px;      background:#ccc;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <img src="https://cdn3.iconfinder.com/data/icons/musthave/256/stock%20index%20down.png" alt="image down" id="togglearrow" />  <div class="displayblock">      <p>hey, there display block</p>      <p>i toggle on arrow clicks</p>  </div>


Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -