I'm struggling to implement two different states for the toggle button. Currently, clicking the button reveals the hidden h1 text, but it fails to hide the text when the slideToggle() method is used to retract it. Just to clarify: I want the calendar container to shrink when the toggle button is clicked and display the hidden message in its place, and vice versa.
$(document).on('turbolinks:load', function () {
$("button").click(function(){
$("div#hide-calendar").slideToggle("slow", "linear", function(){
$("div#calendar-minimized-panel-msg").show();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6">
<div class="close-calendar-btn">
<button class="btn btn-outline-primary btn-sm" id="hide-calendar">Minimize Calendar</button>
</div>
<div class="calendar-title">
<h4>Appointment Calendar</h4>
</div>
<div class="calendar-container" id="hide-calendar">
<%= month_calendar appointments: @appointments do |date, appointments| %>
<%= date %>
<% appointments.each do |appointment| %>
<div>
<%= appointment.name %>
</div>
<% end %>
<% end %>
</div>
<div id="calendar-minimized-panel-msg" style= "display: none;">
<h3>Maximize Calendar Message</h3>
</div>
</div>