asked on

How can i simplify this code? maybe using jQuery(this)

Need to use cleaner code for jquery accordion. page in question http://reeffriendly.org password to login is: reefF

User enters text into form field which uses auto suggest. Try these terms and click GO . (Zinc Oxide, or Oxybenzone)

CODE simple explanation:
if input val == this . then show specific div with data... Only 1 div will be shown at a time.

<script type="text/javascript">

jQuery(document).ready(function () {

var offset = -120;
var scrollTime = 500;
jQuery('.hideme').hide();

jQuery( '#gform_submit_button_1' ).click(function( event ) {
  event.preventDefault();
jQuery('#input_1_5').change().focus();

var selected_option = jQuery('#input_1_2').val();
if (selected_option == 'Zinc Oxide') {
jQuery('.zinc_oxide').addClass('active');
jQuery('.zinc_oxide').slideDown('slow');
jQuery('.zinc_oxide').show();
jQuery('.oxybenzone').removeClass('active');
jQuery('.oxybenzone').slideUp('slow');

//Scroll To
jQuery('html, body').animate({
scrollTop: jQuery('#ingredient').offset().top + offset 
       }, scrollTime);
    }

if (selected_option == 'Oxybenzone') {
jQuery('.oxybenzone').addClass('active');
jQuery('.oxybenzone').slideDown('slow');
jQuery('.oxybenzone').show();
jQuery('.zinc_oxide').removeClass('active');
jQuery('.zinc_oxide').slideUp('slow');


//Scroll To
jQuery('html, body').animate({
scrollTop: jQuery('#ingredient').offset().top + offset 
       }, scrollTime);
    }
});
});

</script>

Open in new window

leakim971

    <script type="text/javascript">
        jQuery(function($) {

            var offset = -120;
            var scrollTime = 500;
            $('.hideme').hide();

            $( '#gform_submit_button_1' ).click(function( event ) {
                event.preventDefault();
                $('#input_1_5').change().focus();

                var classes = ['.zinc_oxide','.oxybenzone'];
                var selected_option = $('#input_1_2').val();
                if(selected_option == 'Oxybenzone')
                    classes.push(classes.shift()); // invert positions

                $(classes[0]).addClass('active').slideDown('slow').show();
                $(classes[1]).removeClass('active').slideUp('slow');

                //Scroll To
                $('html, body').animate({
                    scrollTop: $('#ingredient').offset().top + offset
                }, scrollTime);

            });
        });

    </script>

Open in new window

Aaron Roessler

ASKER

I will be using more than just two divs. for example: var classes = ['.zinc_oxide','.oxybenzone','.titanium_oxide','.octinoxate','.avobenzone','.homosalate','.octisalate','.octocrylene','.retinyl_palmitate','.phthalates','.paraben'];

I will have many divs each with specific content. I basically need this to act kinda like an Accordion that only allows one div to be open at one time... these divs are shown/hidden when the user enters their ingredient into the input filed and clicks GO button.

SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Aaron Roessler

ASKER

I finally figured this out!!

 <script type="text/javascript">
        jQuery(function($) {
            var offset = -200;
            var scrollTime = 500;
            $('.hideme').hide();

            $( '#gform_submit_button_1' ).click(function( event ) {
                event.preventDefault();
if ($('.hideme').hasClass('active')){
$('.hideme').fadeOut('slow').hide();
}
var new_active_class = "." + $('#input_1_2').val().replace(/\s/g,"_").toLowerCase(); //.zinc_oxide
$(new_active_class).addClass('active').fadeIn('slow').show();

                //Scroll To
                $('html, body').animate({
                    scrollTop: $('#ingredient').offset().top + offset
                }, scrollTime);

            });
        });
    </script>

Open in new window

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial