Chartist Shortcodes doesnt display anything in tabs or show/hide sections

  • Resolved wavesnshapes

    (@wavesnshapes)


    2 years, 5 months ago

    Hi, first of all great plugin, thank you all who worked on this.

    [ TablePress Extension: Chartist ]
    My issue is when i try to use the shortcodes in tabs or sections to show and hide with javascript (im working on Elementor) only the first shortcode displays the charts.

    https://www.roicrafter.com/app/ you can navigate between the “today” and “last 7 days” buttons/tabs.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter wavesnshapes

    (@wavesnshapes)

    the problem also there when trying to use shortcodes via elementor templates, elementor tabs or custom show/hide via JS

    [show/hide JS]

    <script>
    document.addEventListener(‘DOMContentLoaded’, function() {
    jQuery(function($){
    $(‘.clicktoshow’).each(function(i){
    $(this).click(function(){ $(‘.showclick’).eq(i).show();
    $(‘.showclick2’).eq(i).hide();
    $(‘.showclick3’).eq(i).hide();
    $(‘.showclick4’).eq(i).hide();
    $(‘.showclick5’).eq(i).hide();
    }); });
    }); });
    </script>
    <style>
    .clicktoshow{
    cursor: pointer;
    }
    .showclick{
    display: block;
    }
    </style>

    <script>
    document.addEventListener(‘DOMContentLoaded’, function() {
    jQuery(function($){
    $(‘.clicktoshow2’).each(function(i){
    $(this).click(function(){ $(‘.showclick2’).eq(i).show();
    $(‘.showclick’).eq(i).hide();
    $(‘.showclick3’).eq(i).hide();
    $(‘.showclick4’).eq(i).hide();
    $(‘.showclick5’).eq(i).hide();
    }); });
    }); });
    </script>
    <style>
    .clicktoshow2{
    cursor: pointer;
    }
    .showclick2{
    display: none;
    }
    </style>

    <script>
    document.addEventListener(‘DOMContentLoaded’, function() {
    jQuery(function($){
    $(‘.clicktoshow3’).each(function(i){
    $(this).click(function(){ $(‘.showclick3’).eq(i).toggle();
    $(‘.showclick2’).eq(i).hide();
    $(‘.showclick’).eq(i).hide();
    $(‘.showclick4’).eq(i).hide();
    $(‘.showclick5’).eq(i).hide();
    }); });
    }); });
    </script>
    <style>
    .clicktoshow3{
    cursor: pointer;
    }
    .showclick3{
    display: none;
    }
    </style>

    <script>
    document.addEventListener(‘DOMContentLoaded’, function() {
    jQuery(function($){
    $(‘.clicktoshow4’).each(function(i){
    $(this).click(function(){ $(‘.showclick4’).eq(i).toggle();
    $(‘.showclick’).eq(i).hide();
    $(‘.showclick3’).eq(i).hide();
    $(‘.showclick2’).eq(i).hide();
    $(‘.showclick5’).eq(i).hide();
    }); });
    }); });
    </script>
    <style>
    .clicktoshow4{
    cursor: pointer;
    }
    .showclick4{
    display: none;
    }
    </style>

    <script>
    document.addEventListener(‘DOMContentLoaded’, function() {
    jQuery(function($){
    $(‘.clicktoshow5’).each(function(i){
    $(this).click(function(){ $(‘.showclick5’).eq(i).toggle();
    $(‘.showclick’).eq(i).hide();
    $(‘.showclick3’).eq(i).hide();
    $(‘.showclick2’).eq(i).hide();
    $(‘.showclick4’).eq(i).hide();
    }); });
    }); });
    </script>
    <style>
    .clicktoshow5{
    cursor: pointer;
    }
    .showclick5{
    display: none;
    }
    </style>

    Plugin Author silsha

    (@silsha)

    Hello, a simple workaround seems to be to trigger a window resize after switching to the other tab:

    window.dispatchEvent(new Event('resize'));

    This will force the chart to rerender.

    Thread Starter wavesnshapes

    (@wavesnshapes)

    Thank you! ^^

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Chartist Shortcodes doesnt display anything in tabs or show/hide sections’ is closed to new replies.