jQuery toggle function fails to toggle div element as intended

I am a JavaScript newbie and I am attempting to create a basic hide and show div toggle, but unfortunately, it is not functioning properly. I cannot seem to pinpoint the issue – initially, I set the div's display to none, then when the course-info-toggle class is clicked, it should change to display:block with a transition downwards.

Do you have any suggestions?

/* Toggle on course detail sections */
$(document).ready(function() {
  $('.course-info-toggle').click(function() {
    $('.toggle-content').toggleClass('.show');
  });
});
.toggle-content.show {
  display: block;
  transition: left 0.3s linear;
}

.toggle-content {
  display: none;
  background-color: #eeeeee;
  padding: 1rem;
  margin-right: 1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="toggle-wrap">
  <div class="course-info-toggle">
    <p id="course-details-toggle-font">COURSE OBJECTIVES</p>
    <img src="img/course-down-arrow.png" align="course-down-arrow">
  </div>
  <div class="toggle-content">
    <p> simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled”<br>
      <p> simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled”<br>
      </p>
  </div>
</div>

javascriptjqueryhtmlcss

Answer №1

Eliminate the dot from the toggleClass

The correct syntax is 

$('.toggle-content').toggleClass('show');

and not like .toggleClass('.show')

It appears that you want to include both animation and transition. Consider using keyframes for animation as the display property does not seem to work with transition.

Css transition from display none to display block, navigation with subnav

Slide in from left CSS animation

Solution: Modify your css classes accordingly. This will give you more flexibility to play around with different effects.

.toggle-content.show {
   visibility: visible;
     position: relative;
   opacity: 1;
     animation: leftSlide 2s forwards;
}

.toggle-content {
 opacity: 0;
  visibility: hidden;
  background-color: #eeeeee;
  transition: opacity 5s, visibility 2ms;
}

@keyframes leftSlide {
  0% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(0);
  }
}

To make it slide down, you can use translateY.

Answer №2

To make the necessary change, replace .show with just show and include !important after display:block 

/* Toggle on course detail sections */
$(document).ready(function() {
  $('.course-info-toggle').click(function() {

    $('.toggle-content').toggleClass('show');
  });
});
.toggle-content.show {
  display: block !important;
  transition: left 0.3s linear;
}

.toggle-content {
  display: none;
  background-color: #eeeeee;
  padding: 1rem;
  margin-right: 1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-wrap">
  <div class="course-info-toggle">
    <p id="course-details-toggle-font">COURSE OBJECTIVES</p>
    <img src="img/course-down-arrow.png" align="course-down-arrow">
  </div>
  <div class="toggle-content">
    <p> simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled”<br>
      <p> simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled”<br>
      </p>
  </div>
</div>

Answer №3

Modify the following statement

$('.toggle-content').toggleClass('.show');

to read as follows

$('.toggle-content').toggleClass('show');

Answer №4

$(document).ready(function() {
$('.course-info-toggle').click(function() {
$('.toggle-content').toggleClass('show');
});
});
.toggle-content.show {
display: block;
    transition: left 0.3s linear;
}

.toggle-content {
display: none;
background-color: #eeeeee;
padding: 1rem;
margin-right:1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-wrap">
<div class="course-info-toggle">
<p id="course-details-toggle-font">COURSE OBJECTIVES</p>
<img src="img/course-down-arrow.png" align="course-down-arrow">
</div>
<div class="toggle-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled”<br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled”<br>
</p>
</div>
</div>

Answer №5

To toggle a class, make sure to provide a string like this:

.toggleClass('active');

Answer №6

Everything seems to be functioning correctly, unless I am mistaken and there is no error

$('.toggle-content').toggleClass('.show');

You should not include the period before 'show', it should be

$('.toggle-content').toggleClass('show');

According to the documentation, you don't need to use a period before the class name. It appears to be working fine in my opinion if you follow this.

You can view the fiddle here. I didn't make any changes other than the one mentioned above.

Answer №7

/* Function to toggle course detail sections */
$('.course-info-toggle').click(function() {
  $('.toggle-content').toggleClass('show');
});
.toggle-content.show {
  display: block;
  transition: left 0.3s linear;
}

.toggle-content {
  display: none;
  background-color: #eeeeee;
  padding: 1rem;
  margin-right: 1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-wrap">
  <div class="course-info-toggle">
    <p id="course-details-toggle-font">EXPLORE COURSE DETAILS</p>
    <img src="img/course-down-arrow.png" align="course-down-arrow">
  </div>
  <div class="toggle-content">
    <p> simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled”<br>
      <p> simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled”<br>
      </p>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The PHP response is constantly changing and adapting, creating

My webpage has a button that triggers an ajax request to a php page, all working well. I have a database called messages, with columns for "id", "receiver", "sender", and "message". Let's say there are two entries in the database where both the sender ...

phpjqueryajax

Utilize HTTPS and HTTP with Express framework in node.js

Currently, I am utilizing the express (3.0) framework on node.js to handle routing in my application. While most of the application makes use of the http protocol, there is a specific route that I intend to serve exclusively via https. This particular par ...

javascriptnode.jshttphttpsexpress

The jQuery service response appears in Firebug but is not being received in the success function

Whenever I try to access the service url using a browser, it runs and displays a json result like this: /*-secure-{"statusCode":200,"errors": ],"isSuccessful":true,"statusReason":"OK","Envelope": {"Body":{"GetStoresByZipcodeResponseElement": {"ns1": ...

jqueryajaxjson

Incorporating a new div element into a CSS layout with multiple

Could this be done? Imagine I have 15 divs, with 3 in each of the 5 columns of a multiple column CSS layout. I also have responsive code that adjusts the number of columns based on screen size. So, is there a way to insert a div between the 12th and 13th ...

javascripthtmlcssmultiple-columns

AJAX call not being executed by the script

I have been trying to send an ajax request to a specific file, but for some reason the file does not complete the operation. I can confirm that the request reaches the file because it echoes 'request received' and then stops abruptly. I am puzzle ...

phpjqueryajax

Customize the order of elements in Bootstrap for mobile devices

How can I create a responsive Bootstrap layout with 2 columns and a nested row in the right column? The desired layout is as follows: Desktop Version: --------- | 2 || 1 | | || | | |------- | || 3 | | || | | ...

csstwitter-bootstrapbootstrap-4

AngularJS Validation does not verify the step limitation of an HTML number input field

Why isn't AngularJS validating the step="0.01" attribute in the second input? It seems to be working fine for the min and max attributes, but not for step. For instance: When entering 0.005, it still evaluates submitNewEntryForm.submitNewEntryAmount. ...

angularjshtmlforms

How to Modify Button Backgrounds in Angular 8 after Click Events?

Within my Angular 8 Component, I have implemented a row of 4 buttons using the ant design (antd) library in HTML. My Objective: I aim to modify the background-color of a button when it is clicked. The previously clicked button should revert to its origin ...

htmlcssbuttonangular8background-color

Detecting a mobile device when using NextJS can be accomplished by using user

With so many topics and questions on Stack Overflow, I am struggling to find the most efficient solution for detecting mobile devices. I have two components - one designed solely for desktops and another for mobile devices. {isMobile? (<SecondComponen ...

javascriptreactjsnext.js

Utilizing conditionals for CSS minification with C# Regular Expressions

Hi there, I'm currently developing an application using C# in Visual Studio that focuses on minifying CSS code. Recently, I encountered a specific piece of code that removes all prefixes for the # ID selector. strCSS = Regex.Replace(strCSS, @"[a-zA-Z ...

c#.netcssregex

The currentViewData property of the model is not defined, resulting in a TypeError when implementing the Hierarchical Grid and accessing the Child Grid

I'm currently working on implementing a Hierarchy Grid in ASP.Net MVC using Syncfusion Grid Control. During the process of fetching data from the server side with an ajax call for the expansion of the child grid, I encountered a JavaScript error (Type ...

c#jqueryajaxasp.net-mvcsyncfusion

Achieving CSS centering with translate and avoiding content overflow

I have a code snippet for centering content both horizontally and vertically. It functions properly unless there is too much content, in which case it gets cut off. Is there a CSS solution to prevent this overflow issue without involving JavaScript? .b ...

htmlcsscentering

Exploring the differences between the meta viewport and font size

My website includes the following code in the section: <meta name="viewport" content="width=990"/> This setting helps to display my webpage well on mobile devices, as using width=device-width causes issues with elements that have 100% width. Howeve ...

htmlcssmeta-tags

Is it possible to create a dynamic drop-down list in PHP using an array?

In the image above, a new row will be added when the user clicks on the [add more] button. While this functionality works perfectly, I would like to send these values using AJAX. I am able to access all textbox values with the array map function in AJAX ex ...

phpjqueryajaxmysqlidrop-down-menu

Stopping HTML 5 video playback while transitioning to a different webpage

My website has a layout with a left menu containing video links and a content area where the videos are played. However, I have encountered an issue when switching between videos. Currently, if I click on Video 1 and then decide to watch Video 2 while Vid ...

jqueryhtmlvideo

I am having trouble with my scripts not working on a rendered partial view after using ajax to render it. Specifically, my datetimepicker is not functioning properly

I have implemented the following action on my controller: public ActionResult Absent() { Response.Cache.SetCacheability(HttpCacheability.NoCache); Response.Cache.SetExpires(DateTime.UtcNow.AddHours(-1)); Response.Cache.SetNoSto ...

jqueryajaxasp.net-mvc-4datetimepicker

What is causing the malfunction in jQuery version 1.7.x?

Here is a code snippet demonstrating the issue I am facing: var $div = $('<div>'); $('span').live('click', function() { this.innerHTML = 'changed'; }); $div.append( $('<span>span</span>& ...

javascriptjquery

Retrieve an object that includes a property with an array of objects by filtering it with an array of strings

I have a large JSON file filled with data on over 300 different types of drinks, including their ingredients, names, and instructions. Each object in the file represents a unique drink recipe. Here is an example of how one of these objects is structured: ...

javascriptarraysjsonobject

Dealing with Errors When Working with Angular Promises

Currently, I am in the process of mastering promises within Angular. In my code snippet, I have two "GET" requests that I need to execute sequentially. Everything is functioning properly, but I'm unsure about how to handle errors in this scenario. If ...

javascriptangularjspromise

Discover the process of connecting a REST controller with AngularJS and Spring

I have a list of file paths stored in an array within the scope variable of an AngularJS Controller. My goal is to properly map these file paths to a Java REST controller for further processing. When I pass it as "/ABC/Scope-Variable," it successfully ma ...

javascriptjavaangularjsspringrest