Having trouble getting the jQuery toggle function to work properly with div elements

Question

Having trouble getting the jQuery toggle function to work properly with div elements

I'm struggling with some divs that are not behaving as expected. When I click the button, it opens and changes the text to "Collapse", but when I click it again, it doesn't change the text back to "Find Support". Additionally, if I click on a different div, it will close the open one first before opening the new one. I need all divs to close when one is clicked, and for the text to change from "Collapse" to "Find Support". Can anyone offer some guidance?

$(document).ready(function () {
        $(".findButton").click(function () {         

            $(".findButton").val('Find Support');            
            $(this).val('Collapse');
            $("id^=ilsList").remove();
            $(this).closest($("#ilsList").appendTo($(this).parent()).slideToggle());          
       });        
    });

Check out the demo here.

jquery html css

Answer 1

Answer №1

Is this what you were looking for? http://jsfiddle.net/sw0zn36e/7/

<div class="DivGroup">
    <label>Bay Village Branch - <b>Cuyahoga County Public Library</b></label>
    <input type="button" onclick="LoadBranches('CuyahogaCounty')" value="Find Support" class="findButton"/>
    <div class="IlsTable" style="display:none;">
        <img src="../../Content/Images/ajax-loader.gif" style="display: none;" id="ajaxLoader"/>
        TEXT            TEXT    TEXT    
    </div>
</div>

$(document).ready(function () {
    $(".findButton").on('click', function () {
        if($(this).val() == 'Find Support') {
            $(".findButton").val('Find Support');            
            $(this).val('Collapse');
            $('.DivGroup').find('.IlsTable').slideUp();
            $(this).closest('.DivGroup').find('.IlsTable').slideDown();                        
        }
        else {
            $(".findButton").val('Find Support');
            $('.DivGroup').find('.IlsTable').slideUp();
        }                    
    });    
});

UPDATED to tackle the challenge of toggling divs. I made some modifications to the HTML structure to enhance the usability of classes. Hopefully, this solution resolves your issue!

Answer 2

Is this what you were looking for? http://jsfiddle.net/sw0zn36e/7/

<div class="DivGroup">
    <label>Bay Village Branch - <b>Cuyahoga County Public Library</b></label>
    <input type="button" onclick="LoadBranches('CuyahogaCounty')" value="Find Support" class="findButton"/>
    <div class="IlsTable" style="display:none;">
        <img src="../../Content/Images/ajax-loader.gif" style="display: none;" id="ajaxLoader"/>
        TEXT            TEXT    TEXT    
    </div>
</div>

$(document).ready(function () {
    $(".findButton").on('click', function () {
        if($(this).val() == 'Find Support') {
            $(".findButton").val('Find Support');            
            $(this).val('Collapse');
            $('.DivGroup').find('.IlsTable').slideUp();
            $(this).closest('.DivGroup').find('.IlsTable').slideDown();                        
        }
        else {
            $(".findButton").val('Find Support');
            $('.DivGroup').find('.IlsTable').slideUp();
        }                    
    });    
});

UPDATED to tackle the challenge of toggling divs. I made some modifications to the HTML structure to enhance the usability of classes. Hopefully, this solution resolves your issue!

Answer 3

Answer №2

~~~~~~~~~~~~~~~~~~~2nd REVIEW ~~~~~~~~~~~~~~~~~~~~~~

Alright, take a look at the revised response below:

~~~~~~~~~~~~~~~~~~~2nd REVIEW ~~~~~~~~~~~~~~~~~~~~~~

Sure, give this modification a try:

$(document).ready(function () {
$(".findButton").click(function () {      
    if ($(this).val() == 'Find Support') {   
        $('.findButton').each(function(){
            $(this).val('Find Support');
        });
        $(this).val('Collapse');            
        $(this).closest($("#ilsList").appendTo($(this).parent()).slideDown());            
    } else {       
        $(this).val('Find Support');
        $('.IlsTable').not(this).each(function(){
             $(this).slideUp();
        });
    }                
});  
});

http://jsfiddle.net/sw0zn36e/4

Answer 4

~~~~~~~~~~~~~~~~~~~2nd REVIEW ~~~~~~~~~~~~~~~~~~~~~~

Alright, take a look at the revised response below:

~~~~~~~~~~~~~~~~~~~2nd REVIEW ~~~~~~~~~~~~~~~~~~~~~~

Sure, give this modification a try:

$(document).ready(function () {
$(".findButton").click(function () {      
    if ($(this).val() == 'Find Support') {   
        $('.findButton').each(function(){
            $(this).val('Find Support');
        });
        $(this).val('Collapse');            
        $(this).closest($("#ilsList").appendTo($(this).parent()).slideDown());            
    } else {       
        $(this).val('Find Support');
        $('.IlsTable').not(this).each(function(){
             $(this).slideUp();
        });
    }                
});  
});

http://jsfiddle.net/sw0zn36e/4

Answer 5

Answer №3

To determine if a button's previous value is different from its current one, you can use the following code snippet:

$(".findButton").click(function() {

  $(this).val(function() {
    return $(this).val() === 'Collapse' ? 'Find support' : 'Collapse';
  });
  $("id^=ilsList").remove();
  $(this).closest($("#ilsList").appendTo($(this).parent()).slideToggle());
});

#ilsList {
  display: none;
}
.IlsTable {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  clear: both;
  margin-left: 100px;
  margin-right: 100px;
  padding: 20px 60px 20px 20px;
  position: relative;
}
.trResult,
.DivGroup {
  border-top: 1px solid #ccc !important;
  float: left;
  padding: 3px 0 10px !important;
  width: 100%;
}
.DivGroup {
  padding-bottom: 3px;
}
.DivGroup label {
  font-size: 17px;
}
button:hover,
.findButton {
  border: 1px solid #333;
  color: #333;
}
button,
.findButton {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
  border: 1px solid #999 !important;
  border-radius: 3px;
  color: #666 !important;
  cursor: pointer;
  font-weight: normal !important;
  margin-top: 5px;
  padding: 5px !important;
  text-transform: uppercase;
}
.findButton {
  background: none repeat scroll 0 0 #1d6096;
  border: medium none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  float: right;
  font-weight: bold;
  padding: 8px 21px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="DivGroup">
  <label>Bay Village Branch - <b>Cuyahoga County Public Library</b>

  </label>
  <input type="button" onclick="LoadBranches('CuyahogaCounty')" value="Find Support" class="findButton">
</div>
<div class="DivGroup">
  <label>Bay Village Branch - <b>Cuyahoga County Public Library</b>

  </label>
  <input type="button" onclick="LoadBranches('CuyahogaCounty')" value="Find Support" class="findButton">
</div>
<div class="DivGroup">
  <label>Bay Village Branch - <b>Cuyahoga County Public Library</b>

  </label>
  <input type="button" onclick="LoadBranches('CuyahogaCounty')" value="Find Support" class="findButton">
</div>
<div class="IlsTable" id="ilsList">
  <img src="../../Content/Images/ajax-loader.gif" style="display: none;" id="ajaxLoader">TEXT TEXT TEXT</div>

Answer 6

To determine if a button's previous value is different from its current one, you can use the following code snippet:

$(".findButton").click(function() {

  $(this).val(function() {
    return $(this).val() === 'Collapse' ? 'Find support' : 'Collapse';
  });
  $("id^=ilsList").remove();
  $(this).closest($("#ilsList").appendTo($(this).parent()).slideToggle());
});

#ilsList {
  display: none;
}
.IlsTable {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  clear: both;
  margin-left: 100px;
  margin-right: 100px;
  padding: 20px 60px 20px 20px;
  position: relative;
}
.trResult,
.DivGroup {
  border-top: 1px solid #ccc !important;
  float: left;
  padding: 3px 0 10px !important;
  width: 100%;
}
.DivGroup {
  padding-bottom: 3px;
}
.DivGroup label {
  font-size: 17px;
}
button:hover,
.findButton {
  border: 1px solid #333;
  color: #333;
}
button,
.findButton {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
  border: 1px solid #999 !important;
  border-radius: 3px;
  color: #666 !important;
  cursor: pointer;
  font-weight: normal !important;
  margin-top: 5px;
  padding: 5px !important;
  text-transform: uppercase;
}
.findButton {
  background: none repeat scroll 0 0 #1d6096;
  border: medium none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  float: right;
  font-weight: bold;
  padding: 8px 21px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="DivGroup">
  <label>Bay Village Branch - <b>Cuyahoga County Public Library</b>

  </label>
  <input type="button" onclick="LoadBranches('CuyahogaCounty')" value="Find Support" class="findButton">
</div>
<div class="DivGroup">
  <label>Bay Village Branch - <b>Cuyahoga County Public Library</b>

  </label>
  <input type="button" onclick="LoadBranches('CuyahogaCounty')" value="Find Support" class="findButton">
</div>
<div class="DivGroup">
  <label>Bay Village Branch - <b>Cuyahoga County Public Library</b>

  </label>
  <input type="button" onclick="LoadBranches('CuyahogaCounty')" value="Find Support" class="findButton">
</div>
<div class="IlsTable" id="ilsList">
  <img src="../../Content/Images/ajax-loader.gif" style="display: none;" id="ajaxLoader">TEXT TEXT TEXT</div>

Having trouble getting the jQuery toggle function to work properly with div elements

Answer №1

Answer №2

Answer №3

Similar questions

the scrollbars are appearing on the window instead of within my div container

Customize Your Chrome Experience: Inject an Element to Open a Hidden HTML Page within the Extension

Fade in an image using Javascript when a specific value is reached

In Javascript, an error occurs when something is undefined

Creating custom Magento extensions with jQuery integration

Tips for positioning a div element at the center in ASP.NET

I'm struggling to understand how to use the Beautifulsoup find() function with this particular HTML code

What steps can be taken to create a progress bar in the input field that spans the entire width of its parent div, reaching

Using jQuery to Convert CSV Data into an HTML Table

Unlocking the Potential of Larger jQuery Icons

Using fixed positioning in CSS caused a malfunction in the layout of Materialize columns

Implementing Checkbox Functionality within a Dropdown Menu using AngularJS or JavaScript

I'm experiencing trouble with Shopify as it appears to be failing to execute

Having trouble aligning page in the center with flexbox and styled components

Two child DIVs within a single parent DIV

How can multiple buttons be added to each row in Jquery datatables and how can events be applied to them?

Is it possible for Jquery to directly retrieve the form input without the need for a SET button in the script?

Changing the CSS property of a single table cell's innerHTML

Is there a way to get an iframe to mimic the behavior of other media elements within a horizontal scrolling container?

Updating variable values in AngularJS while navigating through routes