Looking to conceal an <hr> element using jQuery's slideToggle function and then reveal it when clicked once more

I recently embarked on my journey to learn jQuery. I encountered a challenge with a simple button that triggers the slideToggle function to show/hide a div. Directly above this toggled div, there is an


break line which I want to hide when the button is initially clicked to open the div, and then show again when clicked to close the div. Any guidance or assistance on solving this issue would be highly appreciated.

Here is the code snippet along with a basic example on jsfiddle:

https://jsfiddle.net/ewsrq961/1/

Thank you for your help.

HTML:

<hr id="hrItem">
<div id="actionItems">
<h2>Hello There!</h2>
</div>

<div id="actionsBtn">
    <a id="btnAction" href="javascript:void(0)" rel="tooltip" title="Open Actions" class="btn faa-vertical animated-hover" data-original-title="Open Actions"><i class="fa fa-chevron-circle-down" aria-hidden="true" style="padding-right: 10px;"></i>Actions</a>
</div>

CSS:

#actionItems {
    display: none;
    padding-bottom: 15px;
}

#actionsBtn {
    text-align: center;
    background-color: #252d44;
    width: 120px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin: 0 auto;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-top: 0;
    margin-bottom: 20px;
    color: #fff !important;
    padding:5px;
}
#actionsBtn a {
  color: #fff;
}

JS:

// Hide/Show div
        $("#btnAction").click(function(){
            $("#actionItems").slideToggle();
            $(this).find('i').toggleClass('fa-chevron-circle-down fa-chevron-circle-up')
        });

Answer №1

To easily style the #hrItem element with display : none; in CSS, and then incorporate it into the slideToggle function in the JavaScript code, follow these steps:

// Hide/Show Actions Panel
$("#btnAction").click(function(){
  $("#actionItems , #hrItem").slideToggle();   //<<<< add hr id
  $(this).find('i').toggleClass('fa-chevron-circle-down fa-chevron-circle-up')
});
#hrItem{   /* style hr*/
  display : none;
}
#actionItems {
    display: none;
    padding-bottom: 15px;
}

#actionsBtn {
    text-align: center;
    background-color: #252d44;
    width: 120px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin: 0 auto;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-top: 0;
    margin-bottom: 20px;
    color: #fff !important;
    padding:5px;
}
#actionsBtn a {
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr id="hrItem">
<div id="actionItems">
  <h2>Hello There!</h2>
</div>

<div id="actionsBtn">
  <a id="btnAction" href="javascript:void(0)" rel="tooltip" title="Open Actions" class="btn faa-vertical animated-hover" data-original-title="Open Actions">
    <i class="fa fa-chevron-circle-down" aria-hidden="true" style="padding-right: 10px;"></i>
    Actions
  </a>
</div>

Answer №2

If you wish to display the content when the div is closed and hide it when the div is open, you can achieve this by using the .toggle() function on click. This will hide the content on the first click and show it on every second click.

$('#hrItem').toggle();

For example:

// Hide/Show Actions Panel
$("#btnAction").click(function(){
    $("#actionItems").slideToggle();
    $('#hrItem').toggle();    //ADDED
    $(this).find('i').toggleClass('fa-chevron-circle-down fa-chevron-circle-up')
});
#actionItems {
    display: none;
    padding-bottom: 15px;
}

#actionsBtn {
    text-align: center;
    background-color: #252d44;
    width: 120px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin: 0 auto;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-top: 0;
    margin-bottom: 20px;
    color: #fff !important;
    padding:5px;
}
#actionsBtn a {
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr id="hrItem">
<div id="actionItems">
  <h2>Hello There!</h2>
</div>

<div id="actionsBtn">
  <a id="btnAction" href="javascript:void(0)" rel="tooltip" title="Open Actions" class="btn faa-vertical animated-hover" data-original-title="Open Actions"><i class="fa fa-chevron-circle-down" aria-hidden="true" style="padding-right: 10px;"></i>Actions</a>
</div>

Answer №3

To make the "<hr/>" line adjust based on visibility, you can include a conditional statement in the click event:

// Toggle Actions Panel Visibility
$("#btnAction").click(function() {
  $('#hrItem').is(':visible') ? $('#hrItem').hide() : $('#hrItem').show();

  $("#actionItems").slideToggle();

  $(this).find('i').toggleClass('fa-chevron-circle-down fa-chevron-circle-up');
});
#actionItems {
  display: none;
  padding-bottom: 15px;
}

#actionsBtn {
  text-align: center;
  background-color: #252d44;
  width: 120px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin: 0 auto;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-top: 0;
  margin-bottom: 20px;
  color: #fff !important;
  padding: 5px;
}

#actionsBtn a {
  color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<hr id="hrItem">
<div id="actionItems">
  <h2>Hello There!</h2>
</div>

<div id="actionsBtn">
  <a id="btnAction" href="javascript:void(0)" rel="tooltip" title="Open Actions" class="btn faa-vertical animated-hover" data-original-title="Open Actions"><i class="fa fa-chevron-circle-down" aria-hidden="true" style="padding-right: 10px;"></i>Actions</a>
</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

`How to utilize the spread operator in Angular 4 to push an object to a specific length`

One issue I'm facing is trying to push an object onto a specific index position in an array, but it's getting pushed to the end of the array instead. this.tradingPartner = new TradingPartnerModel(); this.tradingPartners = [...this.tradingPartner ...

Utilizing a background image in the slick slider

<div id="largeCarousel" style="display:inline-block; float:right;"> <div class="homepage-item" style="padding-bottom:52%; position:relative; box-sizing:border-box;"> <div id="largeCarouselContent" style="position:absolute ...

Change the image size as you scroll through the window

While my opacity style is triggered when the page is scrolled down, I am facing an issue with my transform scale not working as expected. Any suggestions on how to troubleshoot this or any missing pieces in my code? Codepen: https://codepen.io/anon/pen/wy ...

ReactJS is throwing an error stating that the component is undefined

Experimenting with ReactJS, I've set up a hierarchy of three nested components: UserProfile.jsx import React from 'react'; const UserProfile = React.createClass({ getInitialState: function() { return { username: "zuck" }; ...

What is causing my nested class to be treated as a sibling rather than a child in HTML code

I have been searching for a clear answer to my query, but haven't found one yet. In my HTML script, I have nested divs structured like this: <ul id="navbar"> <li><a href='#' class='dropdown'>Rules</a> ...

How can I place my container above my header in the layout?

I'm facing difficulty positioning the container above my header. Here is an example of what I am aiming for: No matter what I attempt, strange occurrences like the NAV disappearing or divs overlapping keep happening. HTML: <!DOCTYPE html PUBLIC ...

Stop the interval when hovering and start the interval when moving the mouse away

I've managed to create a carousel that automatically slides every 5 seconds, with manual buttons to navigate the slides. My goal is to pause the scrolling when the mouse hovers over a slide and resume once it's no longer hovered. Currently, my s ...

issue with horizontal scrolling in react menu component

**Hi there, I'm encountering an issue with react-horizontal-scrolling-menu. When scrolling, it moves to the right excessively and causes other elements to disappear. Additionally, adding overflowX: 'scroll' to the BOX doesn't activate t ...

JavaScript library - disappear on page refresh

I am using this jquery code and everything seems to be working fine. However, after window.location.reload(true);, I would like to hide the #cmd div if possible. $(document).ready(function () { $("#add").click( function () { var i ...

What causes the function to return null when using router.get('/:x',..), whereas router.get('/foo/:x',...) works perfectly fine?

After weeks of struggling to identify the root cause of my issue, I finally pinpointed it. Now, I'm curious to understand the reason behind this behavior. I constructed an api for my mongodb server following the techniques I learned in school, utiliz ...

Is there a way to pass an HTMLDivElement as a child in React components?

Scenario Currently, I am in the process of developing a React application (rails-react) where the main component is called GameTracker. Within this parent component, there are two child components: EquipmentPanel and PinnedPanels. To achieve a specific fu ...

Design a custom icon for uploading multiple files

Looking to create a bootstrap-4 icon for multi-file upload. I've got the code reference for single file upload, but now I need to know how to create an icon for multi file upload. <!DOCTYPE html> <html> <head> & ...

"Encountered an error: AngularJS is unable to read the property 'push' as it is

I'm attempting to generate an array using data retrieved from an API. However, I continue to encounter an error message stating cannot read property 'push' of undefined in Javascript. Could someone please guide me on how to resolve this iss ...

After updating the INNERHTML, the NAV tag content is no longer functional

I am facing an issue with replacing the contents of a NAV tag that contains UL list items. The original HTML within the NAV tag works perfectly fine, but when I replace it with my own HTML - which matches the original word for word - the dropdown functiona ...

What is the process of converting a byte array into a blob using JavaScript specifically for Angular?

When I receive an excel file from the backend as a byte array, my goal is to convert it into a blob and then save it as a file. Below is the code snippet that demonstrates how I achieve this: this.getFile().subscribe((response) => { const byteArra ...

After inserting the Telerik component, the code <% ... %> is throwing an error

I have a webpage with ASPX that utilizes JavaScript and ASP components without issues. However, after adding a Telerik combobox, I encountered an error: The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %& ...

Is it possible to access the Firebase user object beyond the confines of the Firebase function?

Despite successfully logging users into my application using Google Auth from Firebase, I am facing an issue where the User object does not display on the front end of my application (which utilizes Pug templates). How can I resolve this? The code snippet ...

Centering the logo using Material-UI's alignment feature

Need help centering a logo in my login form using Material-UI. Everything else is centered except for the logo, which is stuck to the left side of the card. I've tried adding align="center" and justify="center" under the img tag, but it's still ...

Utilizing CSS to Display a Variety of Colors within a Text String

Is it possible to style different words in a sentence with various colors using only CSS, without using the span element? For instance, how can I make the word "Red" appear in red, "Blue" in blue, and "Green" in green within an h1 tag? ...

Ajax request unable to load Image Slider

I'm currently implementing an Image Slider from this source For the site structure, I've set up an index.html file to display all the pages, allowing navigation by changing the content within <div id="isi">. Here's a snippet of the in ...