www.webdeveloper.com
Results 1 to 2 of 2

Thread: Help Make my Code Elegant

Hybrid View

  1. #1
    Join Date
    Jun 2013
    Posts
    15

    Help Make my Code Elegant

    Ok So we have 8 Div's, all labelled #one, #two, #three ect..

    When you click on the show attractions button, a <p> disappears and then I want the first div to show, on clicking the button again I'd like to hide the current Div and show the next in order,

    Here is the code so far



    Code:
     $('.hide').click( function() {
    		if ($('.showhide').is(':visible')) {
                $('.showhide').slideUp(1200)
    			$(this).html('Next Attraction')
    		$('#one').delay(1500).slideDown(500);
    			
    		}
    		else if ($('#one').is(':visible')) {
    		$('#one').css('display' , 'none');
    		$('#two').fadeIn(500)
    		}
    		
    		else if ($('#two').is(':visible')) {
    		$('#two').css('display' , 'none');
    		$('#three').fadeIn(500)
    		}
    		
    		else if ($('#three').is(':visible')) {
    		$('#three').css('display' , 'none');
    		$('#four').fadeIn(500)
    		}
    		
    		else if ($('#four').is(':visible')) {
    		$('#four').css('display' , 'none');
    		$('#five').fadeIn(500)
    		}
    		
    		else if ($('#five').is(':visible')) {
    		$('#five').css('display' , 'none');
    		$('#six').fadeIn(500)
    		}
    		
    		else if ($('#six').is(':visible')) {
    		$('#six').css('display' , 'none');
    		$('#seven').fadeIn(500)
    		}
    		
    		else if ($('#seven').is(':visible')) {
    		$('#seven').css('display' , 'none');
    		$('#eight').fadeIn(500)
    		}
    		
    		
    		else {
    			$('#eight').css('display' , 'none');
    		$('#one').fadeIn(500)
    			
    		}
    		
    		
    		
    	});
    It works, but is such a backwards why of doing it.

    I have tried a for loop but it brings out all the elements.

    Thank you for your time.

  2. #2
    Join Date
    Jul 2011
    Posts
    131
    Maybe something like this:
    Code:
    $('.hide').click(function () {
    	var ids = ['#one', '#two', '#three', '#four', '#five', '#six', '#seven', '#eight'],
    		ids_count = ids.length,
    		i = 1,
    		$current_element;
    	if ($('.showhide').is(':visible')) {
    		$('.showhide').slideUp(1200);
    		$(this).html('Next Attraction');
    		$('#one').delay(1500).slideDown(500);
    	} else {
    		for (; i < ids_count; i++) {
    			$current_element = $(ids[i]);
    			if (i === (ids_count - 1)) {
    				$current_element.css('display', 'none');
    				$(ids[0]).fadeIn(500);
    			} else {
    				if ($current_element.is(':visible')) {
    					$current_element.css('display', 'none');
    					$(ids[i + 1]).fadeIn(500);
    					break;
    				}
    			}
    		}
    	}
    });

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles