CODEWITHSUNDEEP
javascriptjqueryhtmlcss
guruje
guruje

Reputation: 37

Division hide in jquery not working

I have different divisions with hide/show tag. What I need is the following: If one division is opened, other divisions should be hided. The jQuery used in this code: jquery/1.8.2/jquery.min.js and the complete code is given below:

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('.bhlink').on('click', function () {
        $(this).text(function (i, txt) {
            return txt.indexOf('MORE') != -1 ? 'HIDE' : 'MORE';
        }).closest('.nn').next('.bhinfo').slideToggle();
    });
});
</script>

CSS Code:

.bhinfo {  display: none; }
.nn { margin: 5px 0 5px 0; font-weight: bold;}

HTML in body:

David jhon<br /><div class="nn">
<a class="bhlink" href="javascript:void(0)">MORE</a></div>
<div class="bhinfo">Mobile: 99934 59234</div>  

Peter mick <br /><div class="nn">
<a class="bhlink" href="javascript:void(0)">MORE</a></div>
<div class="bhinfo">Mobile: 88934 59234</div>

Sleek boon <br /><div class="nn">
<a class="bhlink" href="javascript:void(0)">MORE</a></div>
<div class="bhinfo">Mobile: 76534 59234</div>

Kindly help me out, in correcting the code please?

Upvotes: 1

Views: 104

Answers (4)

Nishit Maheta
Nishit Maheta

Reputation: 6031

use below code. $('.bhinfo').slideUp(); and $('.bhlink').text('MORE');

slideUp() is apply to all bhinfo element.

$('.bhlink').text('MORE'); change text to MORE in all bhlink element.

Check DEMO

 jQuery(document).ready(function($) {
   $('.bhlink').on('click', function () {
    $('.bhinfo').slideUp();   // add this code
    $('.bhlink').text('MORE');  // add this code
    $(this).text(function (i, txt) {
        return txt.indexOf('MORE') != -1 ? 'HIDE' : 'MORE';
    }).closest('.nn').next('.bhinfo').slideToggle();
  });
});

Upvotes: -1

Pranav C Balan
Pranav C Balan

Reputation: 115222

Use siblings() to get other divs

jQuery(document).ready(function($) {
  $('.bhlink').on('click', function() {
    $(this).text(function(i, txt) {
        return txt.indexOf('MORE') != -1 ? 'HIDE' : 'MORE';
      }).closest('.nn')
      .next('.bhinfo')
      .slideToggle()
      //For getting sibling div to hide them
      .siblings('.bhinfo').slideUp()
      //For Changing their text from HIDE to MORE
      .prev('.nn').find('a').text('MORE');
  });
});
.bhinfo {
  display: none;
}
.nn {
  margin: 5px 0 5px 0;
  font-weight: bold;
}
HTML in body:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
David jhon
<br />
<div class="nn">
  <a class="bhlink" href="javascript:void(0)">MORE</a>
</div>
<div class="bhinfo">Mobile: 99934 59234</div>

Peter mick
<br />
<div class="nn">
  <a class="bhlink" href="javascript:void(0)">MORE</a>
</div>
<div class="bhinfo">Mobile: 88934 59234</div>

Sleek boon
<br />
<div class="nn">
  <a class="bhlink" href="javascript:void(0)">MORE</a>
</div>
<div class="bhinfo">Mobile: 76534 59234</div>

Upvotes: 1

VJP
VJP

Reputation: 1

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('.bhlink').on('click', function () {
        $(this).parent('.nn').find('.bhinfo').slideToggle();
        });
    });
});
</script>

hope this script helps. please try and let me know.

Upvotes: -1

T.J. Crowder
T.J. Crowder

Reputation: 1074268

$(this) will wrap a single element, there's no need to pass a function into text, as you know it will only loop over one element.

You're also not, as far as I can tell, actually making any effort to show or hide anything.

I assume clicking a HIDE link should hide its associated div. So (see code comments):

$(function() {
    $('.bhlink').on('click', function () {
        // Get jQuery wrappers for the link that was clicked,
        // and the .bhinfo connected to it
        var $this = $(this),
            $bhinfo = $this.closest(".nn").next(".bhinfo");

        // Are we showing or hiding?
        if ($this.text() == 'MORE') {
            // Showing, hide all that are visible and change
            // their links' associated text to 'MORE'
            $(".bhinfo:visible")
              .slideUp()
              .prev(".nn").find(".bhlink").text('MORE');
            // Show our div and change our text
            $bhinfo.slideDown();
            $this.text('HIDE');
        } else {
            // Hiding -- just slide our div up and change our text
            $bhinfo.slideUp();
            $this.text('MORE');
        }
    });
});
.bhinfo {  display: none; }
.nn { margin: 5px 0 5px 0; font-weight: bold;}
David jhon<br /><div class="nn">
<a class="bhlink" href="javascript:void(0)">MORE</a></div>
<div class="bhinfo">Mobile: 99934 59234</div>  

Peter mick <br /><div class="nn">
<a class="bhlink" href="javascript:void(0)">MORE</a></div>
<div class="bhinfo">Mobile: 88934 59234</div>

Sleek boon <br /><div class="nn">
<a class="bhlink" href="javascript:void(0)">MORE</a></div>
<div class="bhinfo">Mobile: 76534 59234</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Upvotes: 2

Related Questions