php - Making post specific toggle buttons -


i created widget in functions.php intended added services section. created , displayed 6 unique services using widget. in each service, there more button when clicked toggled remaining content. problem whenever click on more button of of services, other services toggled. how can modify toggle script when user click on button service a, content service toggled without affecting others? below codes , screenshot"

//functions.php

<div class="col-lg-4 col-sm-4 focus-box" data-scrollreveal="enter left after 0.15s on 1s">          <?php if( !empty($instance['image_uri']) && ($instance['image_uri'] != 'upload image') ) { ?>              <div class="service-icon">                  <?php if( !empty($instance['link']) ) { ?>                      <a href="<?php echo $instance['link']; ?>"><i class="pixeden" style="background:url(<?php echo esc_url($instance['image_uri']); ?>) no-repeat center;width:100%; height:100%;"></i> <!-- focus icon--></a>                  <?php } ?>              </div>          <?php } elseif( !empty($instance['custom_media_id']) ) {                  $zerif_ourfocus_custom_media_id = wp_get_attachment_image_src($instance["custom_media_id"] );                 if( !empty($zerif_ourfocus_custom_media_id) && !empty($zerif_ourfocus_custom_media_id[0]) ) {                     ?>                          <div class="service-icon">                              <?php if( !empty($instance['link']) ) { ?>                                  <a href="<?php echo $instance['link']; ?>"><i class="pixeden" style="background:url(<?php echo esc_url($zerif_ourfocus_custom_media_id[0]); ?>) no-repeat center;width:100%; height:100%;"></i> <!-- focus icon--></a>                              <?php } ?>                           </div>                      <?php                 }              }         ?>          <div class="focus-right">         <h3 class="red-border-bottom boxeq"><?php if( !empty($instance['title']) ): echo apply_filters('widget_title', $instance['title']); endif; ?></h3>         <!-- focus heading -->          <?php             if( !empty($instance['text']) ) {                 echo '<p class="boxeq2">';                     echo nl2br(htmlspecialchars_decode(apply_filters('widget_title', $instance['text'])) );                 echo '</p>';             }         ?>           <!-- more -->         <?php             if( !empty($instance['textmore']) ) {                 echo '<p class="focusmore">';                     echo nl2br(htmlspecialchars_decode(apply_filters('widget_title', $instance['textmore'])) );                 echo '</p>';             }         ?>              <button id="showfocus1" class="btn-services">see more</button>             <button id="hidefocus1" class="btn-services">see less</button>      </div>     </div> 

//script

/* services toggle*/  ;(function ($) {     function clickhandler3() {         $('#hidefocus1').toggle();         $('#showfocus1').toggle();         $('.focusmore').toggle('slow');     }      $(document).ready(function(){         $('#hidefocus1, .focusmore').hide();          $('#hidefocus1, #showfocus1').on('click', clickhandler3);     }); })(jquery); 

enter image description here

try : have added class button show more or less demo

 $('.focusmore').hide();    $('.hidefocus').on('click', function(){    $(this).toggle();    $(this).siblings('.showfocus').toggle();    $(this).siblings('.focusmore').toggle();    });  $('.showfocus').on('click', function(){    $(this).toggle();    $(this).siblings('.hidefocus').toggle();    $(this).siblings('.focusmore').toggle();  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  <div class="focus-right">                  <h3 class="red-border-bottom boxeq">widget title</h3>                  <!-- focus heading -->                    <p class="boxeq2">lorem ipsum dolor sit amet, in laborum, diam in leo cum nunc. cursus sollicitudin, nec varius arcu viverra dictumst volutpat tellus. leo ac tincidunt dolor massa massa in, phasellus amet iaculis, quis pellentesque int</p>                  <!-- more -->                  <p class="focusmore" style="display: none;">test tset este tset etesteststestestsdfaf</p>              <button class="btn-services showfocus" id="showfocus1" style="display: inline-block;">see more</button>              <button class="btn-services hidefocus" id="hidefocus1" style="display: none;">see less</button>            </div>          <div class="focus-right">                  <h3 class="red-border-bottom boxeq">widget title</h3>                  <!-- focus heading -->                    <p class="boxeq2">lorem ipsum dolor sit amet, in laborum, diam in leo cum nunc. cursus sollicitudin, nec varius arcu viverra dictumst volutpat tellus. leo ac tincidunt dolor massa massa in, phasellus amet iaculis, quis pellentesque int</p>                  <!-- more -->                  <p class="focusmore" style="display: none;">test tset este tset etesteststestestsdfaf</p>              <button class="btn-services showfocus" id="showfocus1" style="display: inline-block;">see more</button>              <button class="btn-services hidefocus" id="hidefocus1" style="display: none;">see less</button>            </div>          <div class="focus-right">                  <h3 class="red-border-bottom boxeq">widget title</h3>                  <!-- focus heading -->                    <p class="boxeq2">lorem ipsum dolor sit amet, in laborum, diam in leo cum nunc. cursus sollicitudin, nec varius arcu viverra dictumst volutpat tellus. leo ac tincidunt dolor massa massa in, phasellus amet iaculis, quis pellentesque int</p>                  <!-- more -->                  <p class="focusmore" style="display: none;">test tset este tset etesteststestestsdfaf</p>              <button class="btn-services showfocus" id="showfocus1" style="display: inline-block;">see more</button>              <button class="btn-services hidefocus" id="hidefocus1" style="display: none;">see less</button>            </div>


Comments

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

asp.net mvc - breakpoint on javascript in CSHTML? -