javascript - Hiding the Second Play/Pause button -

javascript - Hiding the Second Play/Pause button -

i making play/pause button slider. have working , it's perfect. almost. slight problem have (for sure there quick fix) want show 1 play/pause image switch classes when clicked. images work since creating 2 classes play , pause, have 2 images showing next slider have same function! how hide (get rid of) of sec image while preserving functionality of second? cannot remove sec ul class html since i'm assigning attributes it, cannot figure out how not create show up. i've tried searching online none of solutions address specific problem.

here's code:

html

<div id='autocontrols'> <ul class="bx-start"> </ul> <ul class="bx-stop"> </ul> </div>

javascript

$('#autocontrols').on("click", '.bx-start', function(){ alert("starting!"); main_slider.startauto(); }); $('#autocontrols').on("click", '.bx-stop', function(){ alert("stoping!"); main_slider.stopauto(); }); $('#autocontrols ul').bind("click", function() { if ($(this).attr("class") == "bx-start") $(this).attr("class", "bx-stop"); else $(this).attr("class", "bx-start"); });

css

/*auto start button*/ ul.bx-start { background: image-url("pause.png") no-repeat 0 0; height: 50px; } /*auto stop button*/ ul.bx-stop { background: image-url("play.png") no-repeat 0 0; height: 50px; }

jsbin demo

first of all <ul> tag not meant used button rather contain <li> list elements need this:

<span class="control start"></span>

with related css:

/* auto buttons */ .control{ display:inline-block; width:50px; height:50px; } .start { background: url("play.png") no-repeat 0 0;} .stop { background: url("stop.png") no-repeat 0 0;}

than jquery need becomes pretty trivial:

$('.control').click(function(){ // first toggle class $(this).toggleclass('start stop'); // booleanize current class var isplay = $(this).hasclass('start'); if(isplay){ // like: main_slider.startauto(); }else{ // like: main_slider.stopauto(); } });

the code above flexible allows start autoplay on document load assigning html like:

<span class="control stop"></span> <!-- autoplaying need stop class -->

and above work specific case.

javascript jquery html css player