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:
$(".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
Post a Comment