Show / hide DIV with jQuery - doesn't work in one page

by kibus90   Last Updated July 15, 2018 13:08 PM

I fight with one thing from two days... but I just gave up! I already made a jsFiddle to check it, maybe my code is wrong or something else.. but the code works fine on jsFiddle, but no on my this page (on another subpage this code works)...

I use WP Job Manager Resumes... I generate page by code [resumes]

By plugin WPBakery Page Builder I add a custom JS to subpage. All codes work like: alert('test'), but doesn't work this:

    <script>
jQuery(document).ready(function($){
$(".more-info").click(function(){
$(this).closest('.resume_list').find('.main-box-info').slideToggle();
   $(this).closest('.more-info').find('span.click-show-notes, span.click-hide-notes').toggle();
});
});
    </script>

<ul class="resumes">
    <li class="resume_list" style="display: flow-root">


            <div class="resume-detalis">

                <div class="resume-title-col resume-column">
                    <h5 class="job-offer-title"><a href="#">Kunegunda Wsteczna</a></h5>
                </div>   

                <div class="resume-location resume-column">
                   <span class="locaction-resume">Wsteczna, Mongolia</span>
                </div>

                <ul class="meta-info resume-column">

                <li><span class="current-status-candidate szukam-pracy" style="white-space: nowrap;margin-right:6px;display:inline-block">I'm looking for a job</span> </li>

                    <li class="resume-last-update">
                      <i>ost. akt.:</i> 1 min temu                </li>
                </ul>
            </div>
    <div class="more-info" style="cursor:pointer;border-radius: 5px; border: 1px solid #ccc!important; color: #515151; background: #f6f6f6; width: fit-content; margin-right: auto!important; margin-top: 5px!important; position: relative; font-size: 15px; padding: 0 7px;"><span class="click-show-notes">Show more<i class="fas fa-arrow-down" style="margin-left: 8px"></i></span><span class="click-hide-notes" style="display:none">Show less<i class="fas fa-arrow-up" style="margin-left: 8px"></i></span></div>

        <div class="main-box-info" style="display:none;">

        <div class="main-box-info-tab">
          <table class="main-table-resume">
        <tbody>
            <tr>
                <td class="main-info-table-res dob">Date of birth</td>
                <td class="dob"><div class="icon-div"><i class="far fa-calendar-alt icon-in-table"></i></div>
                14.07.1981 (37 lat)         </td>
            </tr>
            <tr>
                <td class="main-info-table-res">Phone</td>
                <td><div class="icon-div"><i class="far fa-mobile-android-alt icon-in-table"></i></div>
                <a href="tel:0048596596321">0048596596321</a></td>
            </tr>

            <tr>
            <td class="main-info-table-res">Date of registration</td>
            <td style="white-space: nowrap"><div class="icon-div"><i class="far fa-at icon-in-table"></i></div>
            14.07.2018</td>
            </tr>

        </tbody>
    </table></div>
        </div>
        </li>




    <li class="resume_list" style="display: flow-root">


            <div class="resume-detalis">

                <div class="resume-title-col resume-column">
                    <h5 class="job-offer-title"><a href="#">Tobiasz Rokiewicz</a></h5>
                </div>   

                <div class="resume-location resume-column">
                   <span class="locaction-resume">PÅ‚ock, Polska</span>
                </div>

                <ul class="meta-info resume-column">

                <li><span class="current-status-candidate szukam-pracy" style="white-space: nowrap;margin-right:6px;display:inline-block">I'm looking for a job</span> <span class="current-status-candidate fhs" style="white-space: nowrap;display:inline-block">fhs</span></li>

                    <li class="resume-last-update">
                      <i>ost. akt.:</i> 14 hours temu                </li>
                </ul>
            </div>
    <div class="more-info" style="cursor:pointer;border-radius: 5px; border: 1px solid #ccc!important; color: #515151; background: #f6f6f6; width: fit-content; margin-right: auto!important; margin-top: 5px!important; position: relative; font-size: 15px; padding: 0 7px;"><span class="click-show-notes">Show more<i class="fas fa-arrow-down" style="margin-left: 8px"></i></span><span class="click-hide-notes" style="display:none">Show less<i class="fas fa-arrow-up" style="margin-left: 8px"></i></span></div>

        <div class="main-box-info" style="display:none;">
     <div class="extra-box-notes one-box">
    <div class="frame-box title-box"><b>Notes</b></div>
    <div class="frame-box content-box"><p>fafasfasfasfasf</p>
    </div>
    </div>

        <div class="main-box-info-tab one-box">
          <table class="main-table-resume">
        <tbody>
            <tr>
                <td class="main-info-table-res dob">Date of birth</td>
                <td class="dob"><div class="icon-div"><i class="far fa-calendar-alt icon-in-table"></i></div>
                11.06.1994 (24 lat)         </td>
            </tr>
            <tr>
                <td class="main-info-table-res">Phone</td>
                <td><div class="icon-div"><i class="far fa-mobile-android-alt icon-in-table"></i></div>
                <a href="tel:653984523">653984523</a></td>
            </tr>

            <tr>
            <td class="main-info-table-res">Date of registration</td>
            <td style="white-space: nowrap"><div class="icon-div"><i class="far fa-at icon-in-table"></i></div>
            11.07.2018</td>
            </tr>

        </tbody>
    </table></div>
        </div>
        </li>
 </ul>

jsFiddle: http://jsfiddle.net/z780Lgqa/1/

Here is part of code which generate this content: https://pastebin.com/raw/j9vZs9su

And here is preview how looks page:

http://tnijurl.com/070543be664d/

Above code is already pasted in page. Why this doesn't work? What is wrong? I can't handle with it. Someone could help me with it?

Thank you!

Tags : jquery


Related Questions


How to reset, reinit wordpress wpColorPicker?

Updated August 02, 2017 09:08 AM



Sortable post using wp_update_post not updating

Updated March 28, 2017 20:08 PM