jquery - Hide and Show one Record at Time -
i fetch of records , display each article 1 after other. off start last section#rest_of_profile
hidden when user selects a#view_full_profile
in first section want show 1 section in article not of them in each article. haven't been able find solution yet. closest have gotten showing them hiding 1 want show. appreciate help/advice can give.
var allrecords = $('section#rest_of_profile').hide(); $('a#view_full_profile').click(function(){ allrecords.slideup(); $(this).parent().next().slidedown(); return false; }); <article class="searched-record"> <section> <figure> <img src="http://digitalhumanlibrary.com/wp-content/themes/thematicchild/images/profile/anonymous-search-profile.png" alt="member profile avatar"> </figure> <nav class="member-social"> <ul> <li><a href=""><span>f </span></a> </li> <li><a href=""><span>l </span></a> </li> <li><a href=""><span>t </span></a> </li> <li><a class="member-skype" href=""></a> </li> </ul> </nav> </section> <section> <div><span>mebook: </span></div> <div><span>contact name: </span></div> <div><strong><span>country: </span></strong> </div> <div><strong><span>province/state: </span>'.$state.'</strong> </div> <div><strong><span>city: </span></strong> </div> <div><strong><span>time zone: </span></strong> </div> <div><strong><span>program focus: </span></strong> </div> <div><strong><span>occupation: </span></strong> </div> <div><strong><span>areas of expertise: </span></strong> </div> <div><strong><span>target audience: </span></strong> </div> <div><strong><span>video conferencing platforms: </span></strong> </div> <a id="view_full_profile" href="">view full profile</a> </section> <section id="rest_of_profile"> <div><strong><span>email: </span><a href=""></a></strong> </div> <div><strong><span>phone: </span></strong> </div> <div><strong><span>website: </span></strong> </div> <div><strong><span>profile description: </span></strong> </div> <div><strong><span>profile learning goals : </span></strong> </div> <div><strong><span>curriculum links: </span></strong> </div> <div><strong><span>maximium # of students: </span></strong> </div> <div><strong><span>minimum # of students: </span></strong> </div> <div><strong><span>program format: </span></strong> </div> <div><strong><span>program length: </span></strong> </div> <div><strong><span>program cost: </span></strong> </div> <div><strong><span>technology specifications: </span></strong> </div> <div><strong><span>how register: </span></strong> </div> <div><strong><span>record: </span></strong> </div> <div><strong><span>cancellation policy: </span></strong> </div> <div><strong><span>who can contact me: </span></strong> </div> </section> <footer></footer> </article>
i figured out, had walk dom better. go target parent first select child wanted hide , show. interested see more efficient solution instead of repeating same code hide button, time being works beauty, here code.
/**********************************/ /*search profile functions*/ /**********************************/ $('section#rest_of_profile').hide(); $('a#hide_full_profile').hide(); //view full profile $('a#view_full_profile').on('click',function(){ $(this).parent('article.searched-record').children('section#rest_of_profile').toggle('slow'); $('a#view_full_profile').hide(); $('a#hide_full_profile').show(); }); //hide full profile $('a#hide_full_profile').on('click',function(){ $(this).parent('article.searched-record').children('section#rest_of_profile').toggle('slow'); $('a#view_full_profile').show(); $('a#hide_full_profile').hide(); });
Comments
Post a Comment