0

I am new in Wordpress and i have a big problem.. I want to create show-hide based on select option in specific page like this

http://jsfiddle.net/FvMYz/

But when i put my code i doesnt work... There is the option list but it doesnt work... Should i install any script in function.php? Or should i use any plugin to make it work... Thank you in advance

thats my code guys

https://jsfiddle.net/DopeAt/e63e3662/

        <select style="margin: 2% 0 3% 37.84%;" class="div-toggler" data-target=".Greekinfo">
          <option value="">Select game...</option>
<option value="agwn1" data-show=".agwn1">game 1</option>
<option value="agwn2" data-show=".agwn2">game 2</option>
<option value="agwn3" data-show=".agwn3">game 3</option>
<option value="agwn4" data-show=".agwn4">game 4</option>
<option value="agwn5" data-show=".agwn5">game 5</option>
<option value="agwn6" data-show=".agwn6">game 6</option>
<option value="agwn7" data-show=".agwn7">game 7</option>
<option value="agwn8" data-show=".agwn8">game 8</option>
<option value="agwn9" data-show=".agwn9">game 9</option>
<option value="agwn10" data-show=".agwn10">game 10</option>
<option value="agwn11" data-show=".agwn11">game 11</option>
<option value="agwn12" data-show=".agwn12">game 12</option>
<option value="agwn13" data-show=".agwn13">game 13</option>
<option value="agwn14" data-show=".agwn14">game 14</option>
<option value="agwn15" data-show=".agwn15">game 15</option>
<option value="agwn16" data-show=".agwn16">game 16</option>
<option value="agwn17" data-show=".agwn17">game 17</option>
<option value="agwn18" data-show=".agwn18">game 18</option>
<option value="agwn19" data-show=".agwn19">game 19</option>
<option value="agwn20" data-show=".agwn20">game 20</option>
<option value="agwn21" data-show=".agwn21">game 21</option>
<option value="agwn22" data-show=".agwn22">game 22</option>
<option value="agwn23" data-show=".agwn23">game 23</option>
<option value="agwn24" data-show=".agwn24">game 24</option>
<option value="agwn25" data-show=".agwn25">game 25</option>
<option value="agwn26" data-show=".agwn26">game 26</option>
<option value="agwn27" data-show=".agwn27">game 27</option>
<option value="agwn28" data-show=".agwn28">game 28</option>
<option value="agwn29" data-show=".agwn29">game 29</option>
<option value="agwn30" data-show=".agwn30">game 30</option>

    <div class="Greekinfo">
<div class="agwn1">
   <table style="margin-top: 10%;" class="table table-bordered">
  <thead>
<tr>
        <td>teamteamteamΑΕΚ</td>
        <td>teamteamΠαναιτωλικός</td>
        <td>teamteam00/00/00</td>
        <td>teamteam00:00</td>
        <td>teamteamNova</td>
    </tr>
    <tr>
        <td>teamteamΑΕΛ</td>
        <td>teamteamΒέροια</td>
        <td>teamteam00/00/00</td>
        <td>teamteam00:00</td>
        <td>teamteamNova</td>
    </tr>
    <tr>
        <td>teamteamΑ.Ο.Κέρκυρα</td>
        <td>teamteamΑτρόμητος Αθ.</td>
        <td>teamteam00/00/00</td>
        <td>teamteam00:00</td>
        <td>teamteamNova</td>
    </tr>
    <tr>
        <td>teamteamΑΕΠ Ηρακλής</td>
        <td>teamteamΑ.Ο Ξάνθη</td>
        <td>teamteam00/00/00</td>
        <td>teamteam00:00</td>
        <td>teamteamNova</td>
    </tr>
    <tr>
        <td>teamteamΛεβαδειακός</td>
        <td>teamteamΠΑΟΚ</td>
        <td>teamteam00/00/00</td>
        <td>teamteam00:00</td>
        <td>teamteamNova</td>
    </tr>
    <tr>
        <td>teamteamΟλυμπιακός</td>
        <td>teamteamΑστέρας Τρίπολης</td>
        <td>teamteam00/00/00</td>
        <td>teamteam00:00</td>
        <td>teamteamNova</td>
    </tr>
    <tr>
        <td>teamteamΠανιώνιος</td>
        <td>teamteamΠΑΣ Γιάννινα</td>
        <td>teamteam00/00/00</td>
        <td>teamteam00:00</td>
        <td>teamteamNova</td>
    </tr>
    <tr>
        <td>teamteamΠλατανιάς</td>
        <td>teamteamΠαναθηναϊκός</td>
        <td>teamteam00/00/00</td>
        <td>teamteam00:00</td>
        <td>teamteamNova</td>
    </tr>
</tbody>

And my JS code

            <script>
       $('select.div-toggler').change(function(){
           var target = $(this).data('target');
           $(target).children().addClass('hide');
         var show = $("option:selected", this).data('show');
        $(show).removeClass('hide');
               });
            </script>
4
  • What do you have in the JavaScript console?
    – Max Yudin
    Oct 3, 2016 at 12:00
  • jsfiddle.net/DopeAt/e63e3662 this is my code..... i installed scripts through Header and Footer Scripts plugin
    – DopeAt
    Oct 3, 2016 at 12:05
  • Please include the code in your question. If someone with a similar problem finds this question in two years or so, the external link may not work anymore.
    – cjbj
    Oct 3, 2016 at 12:06
  • Yes Sir of course
    – DopeAt
    Oct 3, 2016 at 12:07

1 Answer 1

0

WordPress runs jQuery in noConflict mode. This means that you have either have to use jQuery instead of $ or you can wrap the code:

jQuery(function($) {

    //jQuery code

});

The code at http://jsfiddle.net/FvMYz/3898/ should work and uses the noConflict mode of jQuery. See http://jsfiddle.net/FvMYz/3897/ for a wrapped version that allows you to use $. Both should work.

Where to save the code?

You should never store the script in functions.php. Instead, create assets/js/your-script.js in your theme folder and store the code there. Add the following in your functions.php:

function themeslug_enqueue_script() {
    wp_enqueue_script( 'my-js', get_stylesheet_directory_uri().'/assets/js/your-script.js', array( 'jquery' ) );
}

add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' );

Reference: https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts https://developer.wordpress.org/reference/functions/wp_enqueue_script/

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.