CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rex
Rex

Reputation: 233

Need to hide an <hr> when jQuery slideToggle is executed, then show when clicked again

I am starting to learn jQuery. I have a simple button that I have executing slideToggle to show/hide a div. I have an

break line above the div being toggled. I need to hide this
when the button is first clicked to toggle the div open, then need to show the
when the button is clicked again to toggle the div closed. Any help would be appreciated.

Below is my code as well as a simple jsfiddle example.

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

Thank you.

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')
        });

Upvotes: 1

Views: 1191

Answers (3)

Atlas_Gondal
Atlas_Gondal

Reputation: 2552

I think you want to show it when the div is closed and hide when the div is option then you can just call .toggle() function on click and it will hide on first click and show on each second click. 

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

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>

Upvotes: 1

Carl Edwards
Carl Edwards

Reputation: 14474

You could add a conditional in the click event that would adjust the <hr/> based on visibility:

// Hide/Show Actions Panel
$("#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>

Upvotes: 1

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

While you have id #hrItem to hr so its simple to add css style for it with display : none; and then add #hrItem to classes to slideToggle in js code

// 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>

Upvotes: 2

Related Questions