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

Aaron Roessler
Aaron Roessler used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
    <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 RoesslerWeb Developer

Author

Commented:
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.
leakim971Multitechnician
Top Expert 2014
Commented:
so add a new class to all of theses div, for example "metal"

use :
$(".metal.active").removeClass('active').slideUp('slow');

would be great that the class match the value of the option
<option value="zinc_oxide">Zinc Oxide</option>
<option value="oxybenzone">Oxybenzone</option>
so you can  :
$("." + selected_option).addClass('active').slideDown('slow').show();

if it's not possible to match value and classes, just do :
var selected_option = $('#input_1_2').val().replace(/\s/g,"_").toLowerCase(); // replace space bu underscore and change to lowercase
$("." + selected_option).addClass('active').slideDown('slow').show();

    <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();

                $(".metal.active").removeClass('active').slideUp('slow');
                var new_active_class = "." + $('#input_1_2').val()[b].replace(/\s/g,"_").toLowerCase()[/b];
                $(new_active_class).addClass('active').slideDown('slow').show();

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

            });
        });

    </script>

Open in new window

Aaron RoesslerWeb Developer

Author

Commented:
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

Multitechnician
Top Expert 2014
Commented:
if ($('.hideme').hasClass('active')){
$('.hideme').fadeOut('slow').hide();
}


same as :
$('.hideme.active').fadeOut('slow').hide();

please don't forget to close the question, you can mark your comment as solution

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial