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

Guide on displaying Adsense ads specifically for mobile devices

When an HTML table utilizes both rowspan and colspan attributes, it may encounter issues with being overlapped by the

Use CSS Grid to anchor the final element to the right side of a horizontal navigation menu

Managing the response from a dataless AJAX GET request

Prevent the propagation of the ng-click event within a jQuery click event

Extract the price value from the span element, then multiply it by a certain number before adding it to a div element

What is the best way to convert a repetitive string into a reusable function?

What is preventing this from retrieving the source code?

Real-time chat system using PHP for one-on-one inquiries with server-sent events (not a group chat)

The issue with Cordova (PhoneGap) is that when you move a video file captured by the camera, the gallery thumbnail

When scrolling the page, the Circle Mouse Follow feature will dynamically move with your cursor

Guide on implementing gradient animation effects in a React component

Incorporating information into Observable in Angular 2

Exploring ReactJS: Combining JSON data with HTML elements

Using various jQuery autocomplete features on a single webpage

The grid expands to cover the entire width of the browser

Discovering keywords within HTML code and concealing particular content through jQuery

Express causing textarea in http form to have empty req.body

Analyze a designated section and display the top 3 frequently used words

The backdrop moving in a reverse direction