Question 213558 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to show / Hide Div with animation where div have apex chart

Good Afternnon,

Hi, i am new to coding and learning online for home project.

I am using Apexchart for showing data for duration. i made 4 div base on duration data. After selecting the duration from dropdown, i need to hide all div except selected div. I tried using show and hide and its partially working. Say i first i select "Last Month" its shows right div, then i select "Current Month" it hide Last month div and show Current month div. But when i reselect "Last Month" div not shown with chart.

is there is any alternative where i can show div with animation in better way.

Thanks in Advance

code

<div id="totalMilksaleChartfor7days"></div>

<div id="totalMilksaleChartcurrentmonth" style="display:none"></div>

<div id="totalMilksaleChartlastmonth" style="display:none"></div>

<div id="totalMilksaleChart" style="display:none"></div>



 var durationget = duration;


      if (durationget == "currentmonth") {

        $("#totalMilksaleChartcurrentmonth").show();

        $("#totalMilksaleChartfor7days").hide();
        $("#totalMilksaleChartlastmonth").hide();
        $("#totalMilksaleChart").hide();


      } else if (durationget == "lastmonth") {

        $("#totalMilksaleChartlastmonth").show();

        $("#totalMilksaleChartfor7days").hide();
        $("#totalMilksaleChartcurrentmonth").hide();
        $("#totalMilksaleChart").hide();


      } else if (durationget == "currentyear") {

        $("#totalMilksaleChart").show();

        $("#totalMilksaleChartfor7days").hide();
        $("#totalMilksaleChartlastmonth").hide();
        $("#totalMilksaleChartcurrentmonth").hide();


      } else {

        $("#totalMilksaleChartfor7days").show();

        $("#totalMilksaleChartlastmonth").hide();
        $("#totalMilksaleChartcurrentmonth").hide();
        $("#totalMilksaleChart").hide();

      }
Tags:

2

Answers


  1. 0

    I cant think why it wouldn’t work, seams simple enough:

    function update() {
  const durationget = $("#duration").val();
  $("#totalMilksaleChartfor7days, #totalMilksaleChartcurrentmonth, #totalMilksaleChartlastmonth, #totalMilksaleChart").hide();
  if (durationget == "currentmonth") {
    $("#totalMilksaleChartcurrentmonth").show();
  } else if (durationget == "lastmonth") {
    $("#totalMilksaleChartlastmonth").show();
  } else if (durationget == "currentyear") {
    $("#totalMilksaleChart").show();
  } else {
    $("#totalMilksaleChartfor7days").show();
  }
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="duration" onChange=update()>
  <option value="currentmonth">current month</option>
  <option value="lastmonth">last month</option>
  <option value="currentyear">current year</option>
  <option value="7days">7days</option>
</select>
<br />
<br />
<div id="totalMilksaleChartfor7days">7days</div>
<div id="totalMilksaleChartcurrentmonth" style="display:none">
  current month</div>
<div id="totalMilksaleChartlastmonth" style="display:none">last month</div>
<div id="totalMilksaleChart" style="display:none">current year</div>
    Login or Signup to reply.
  2. 0

    ApexCharts provides an API that allows you to update the chart data dynamically.

    <button id="toggleButton">Toggle Chart</button>
<div id="chartContainer" class="chart-container">
 <div id="chart"></div>
</div>

<style>
 .chart-container {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease;
 }
</style>

<script>
function toggleChartContainer() {
   const chartContainer = document.getElementById("chartContainer");
   const isContainerVisible = chartContainer.style.maxHeight !== "0px";

   if (isContainerVisible) {
      // If the container is visible, hide it
      chartContainer.style.maxHeight = "0px";
   } else {
      // If the container is hidden, show it
      chartContainer.style.maxHeight = "500px"; // Set your desired height here
      // Call the function to render the chart (if it hasn't been rendered yet)
      renderChart();
   }
}

// Function to render the Apex chart
function renderChart() {
  const options = {
  // Your Apex chart options here
};
 const chartData = {
  // Your Apex chart data here
};

// Check if the chart has been initialized already
if (typeof chart === "undefined") {
// If not, create the chart
chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
} else {
// If the chart has been initialized, update the data
chart.updateSeries(chartData);
}
}

// Event listener for the toggle button
document.getElementById("toggleButton").addEventListener("click", 
toggleChartContainer);
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search