Jump to content

jQuery show/hide on change selection option (almost working)


rootKID
 Share

Recommended Posts

so, me and a friend have this website:
https://pizza1.pizzabix.dk/pizzaer/62-117-9-italiano.html#/29-storrelse-almindelig

Currently, im adding CUSTOM JS to the PrestaShop via this file here:

https://pizza1.pizzabix.dk/themes/classic/assets/js/custom.js

At the very bottom of the file, beneath the comment (Product Normal/Family Size on Product Details Page - Show/Hide on change) i have this code here:

$(function () {
  // "29" == (Normal Size)
  // #an_productfields_1_id == (Normal Size)
  // "30" == (Family Size)
  // #an_productfields_2_id == (Family Size)
  // #group_6 == SELECTION/DropDown Form Box

  //$("#an_productfields_1_id").hide(); // Normal Size (hide instantly)
  //$("#an_productfields_2_id").hide(); // Family Size (hide instantly)
  $("#group_6").change(function () {
    if ($("#group_6").val() == "29") {
      // Normal Size
      $("#an_productfields_1_id").show();
    } else {
      $("#an_productfields_1_id").hide();
    }
    if ($("#group_6").val() == "30") {
      // Family Size
      $("#an_productfields_2_id").show();
    } else {
      $("#an_productfields_2_id").hide();
    }
  });
});

and i almost got it working, however! As u try it on the website, and i for example take the (Almindelig) value from the select box, it dosent shows the very first time... but when i change to Family Size, nothing happens on the second choise! And same goes for the other way around. When i select (Familie) on first try, it works, hides the "normal sizes / almindelig", and shows family...

any ideas as to why it does this? I should have used the propper code i think... i got a peace of the code form this linke by searching google:

http://jsfiddle.net/Y3pW9/

https://stackoverflow.com/questions/18572401/jquery-select-change-show-hide-div-event

If you could possibly tell me what im doing wrong and what i could do in future cases, i would be very happy!

Also, i did consider using "toggle" from jQuery, but not sure hos to use that just yet so i went with this option since i got the most experience (so to speak) with this one...

in anyways, i hope you guys can help me out, as always! :D

Thanks in advance!

Looking foreword for a reply... very... VERY... patiently ;)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...