CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
jasonh
jasonh

Reputation: 329

Using JqueryUI dropdown menu to show individual divs

I am trying out an alternative solution to issue I have been have with showing/hiding individual divs.

I am trying to use the JQUERY UI dropdown menu as a solution the dropdown menu menu works but my click functions are not.

Basically the all divs are hidden onLoad except for chartdiv1, as the user click the menu items then the other divs will show as needed. Your help is greatly appreciated.

my js fiddle. http://jsfiddle.net/Jason1975/qtdojq2g/

HTML

<body onLoad="hide()">

<ul id="menu"> 
<li><a id="1">Unit Price</a></li>
<li>Unit Price in Alternative Currency
<ul>
<li><a id="2">GSO_EURO</a></li>      
<li><a id="3">GSO_GBP</a></li>
<li><a id="4">GSO_ZAR</a></li>    
</ul>  
</li>
<li>Unit Price Performance over period
<ul>
<li><a id="5">GSO_USD</a></li>
<li><a id="6">GSO_EURO</a></li>      
<li><a id="7">GSO_GBP</a></li>
<li><a id="8">GSO_ZAR</a></li>    
</ul>  
</li>
</ul>  

<br /><br />
    <!-- Chart Divs -->
    <!-- Chartdiv1 - Unit Price in US Dollars -->
    <div id="chartdiv1" style="width:100%; height:250px; background: #CCC"">CHARTDIV1 - USD CURRENCY</div><br />
    <!-- End Chartdiv1 -->
    <!-- Chartdiv2 - EURO Currency -->
    <div id="chartdiv2" style="width:100%; height:250px; background: #CCC">CHARTDIV2 - EURO CURRENCY</div><br />
    <!-- End Chartdiv2 -->
    <!-- Chartdiv3 - GBP Currency -->
    <div id="chartdiv3" style="width:100%; height:250px; background: #CCC">CHARTDIV3 - GBP CURRENCY</div><br />
    <!-- End Chartdiv3 -->
    <!-- Chartdiv4 - ZAR Currency -->
    <div id="chartdiv4" style="width:100%; height:250px; background: #CCC">CHARTDIV4 -  ZAR CURRENCY</div><br />
    <!-- End Chartdiv3 -->
    <!-- Chartdiv5 - USD Unit Price Perfomance over a Period -->
    <div id="chartdiv5" style="width:100%; height:250px; background: #CCC">CHARTDIV5 - USD PERFORMANCE PERIOD</div><br />
    <!-- End Chartdiv5 -->
    <!-- Chartdiv6 - EURO Unit Price Perfomance over a Period -->
    <div id="chartdiv6" style="width:100%; height:250px; background: #CCC">CHARTDIV6 - EURO PERFORMANCE PERIOD</div><br />
    <!-- End Chartdiv6 -->
    <!-- Chartdiv7 - GBP Unit Price Perfomance over a Period -->
    <div id="chartdiv7" style="width:100%; height:250px; background: #CCC">CHARTDIV7 - GBP PERFORMANCE PERIOD</div><br />
    <!-- End Chartdiv7 -->
    <!-- Chartdiv8 - ZAR Unit Price Perfomance over a Period -->
    <div id="chartdiv8" style="width:100%; height:250px; background: #CCC">CHARTDIV8 - ZAR PERFORMANCE PERIOD</div><br />
    <!-- End Chartdiv8 -->

    <br>

THE JQUERY

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>  
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
<script type="text/javascript">
    $(document).ready(function() { 
    hide();
    $( '#a#1').click( function() {
        var $select = $( this );
        if ( $select ) {
        $( 'div#chartdiv1' ).show();
        } else {
            $( 'div#chartdiv1' ).hide();
        }
        });
        $( 'a#2' ).click( function() {
        var $select = $( this );
        if ( $select ) {
            $( 'div#chartdiv2' ).show();
        } else {
        $( 'div#chartdiv2' ).hide();
        }
        });
    $( 'a#3' ).click( function() {
        var $select = $( this );
        if ( $select ) {
            $( 'div#chartdiv3' ).show();
        }  else {
        $( 'div#chartdiv3' ).hide();
        }
    });
    $( 'a#4' ).click( function() {
        var $select = $( this );
        if ( $select ) {
            $( 'div#chartdiv4' ).show();
        }  else {
        $( 'div#chartdiv4' ).hide();
        }
    });
    $( 'a#5' ).click( function() {
        var $select = $( this );
        if ( $select ) {
            $( 'div#chartdiv5' ).show();
        }  else {
        $( 'div#chartdiv5' ).hide();
        }
    });
    $( 'a#6' ).click( function() {
        var $select = $( this );
        if ( $select ) {
            $( 'div#chartdiv6' ).show();
        }  else {
        $( 'div#chartdiv6' ).hide();
        }
    });
    $( 'a#7' ).click( function() {
        var $select = $( this );
        if ( $select ) {
            $( 'div#chartdiv7' ).show();
        }  else {
        $( 'div#chartdiv7' ).hide();
        }
    });
    $( 'a#8'  ).click( function() {
        var $select = $( this );
        if ( $select ) {
            $( 'div#chartdiv8' ).show();
        }  else {
        $( 'div#chartdiv8' ).hide();
        }
    });
    });
    function hide() {
    var show = ['chartdiv1'];
    for ( var i = 0; i < show.length; ++i ) 
    document.getElementById(show[i]).style.display = "block";
    var hide = ['chartdiv2','chartdiv3','chartdiv4','chartdiv5','chartdiv6','chartdiv7','chartdiv8','hidden','hidden2','currency','currency2'];
    for ( var i = 0; i < hide.length; ++i ) 
    document.getElementById(hide[i]).style.display = "none";
    }
    //END OF ALL THE CHART ITEMS
</script>

Upvotes: 1

Views: 456

Answers (2)

Regent
Regent

Reputation: 5176

Don't know what for I have rewritten code as well, but nevertheless.

  • <a> id is replaced with data-id, which has id of target element.
  • target <div>s styles are placed in CSS chartdiv class styles, including hiding by default.
  • single click event handler is added to <a>s inside <ul id="menu">.
  • target <div>s have additional js-chartdiv class for hide/show handling.

Fiddle.

JS:

$(document).ready(function()
{
    $('.js-chartdiv:first').show();

    $('#menu a').on('click', function()
    {
        $('.js-chartdiv:visible').hide();
        $('#' + $(this).data('id')).show();
    });
});

HTML:

<ul id="menu">
    <li>
        <a data-id="chartdiv1">Unit Price</a>
    </li>
    <li>Unit Price in Alternative Currency
        <ul>
            <li>
                <a data-id="chartdiv2">GSO_EURO</a>
            </li>
            <li>
                <a data-id="chartdiv3">GSO_GBP</a>
            </li>
            <li>
                <a data-id="chartdiv4">GSO_ZAR</a>
            </li>
        </ul>
    </li>
    <li>Unit Price Performance over period
        <ul>
            <li>
                <a data-id="chartdiv5">GSO_USD</a>
            </li>
            <li>
                <a data-id="chartdiv6">GSO_EURO</a>
            </li>
            <li>
                <a data-id="chartdiv7">GSO_GBP</a>
            </li>
            <li>
                <a data-id="chartdiv8">GSO_ZAR</a>
            </li>
        </ul>
    </li>
</ul>
<br /><br />
<div id="chartdiv1" class="chartdiv js-chartdiv">CHARTDIV1 - USD CURRENCY</div>
<div id="chartdiv2" class="chartdiv js-chartdiv">CHARTDIV2 - EURO CURRENCY</div>
<div id="chartdiv3" class="chartdiv js-chartdiv">CHARTDIV3 - GBP CURRENCY</div>
<div id="chartdiv4" class="chartdiv js-chartdiv">CHARTDIV4 - ZAR CURRENCY</div>
<div id="chartdiv5" class="chartdiv js-chartdiv">CHARTDIV5 - USD PERFORMANCE PERIOD</div>
<div id="chartdiv6" class="chartdiv js-chartdiv">CHARTDIV6 - EURO PERFORMANCE PERIOD</div>
<div id="chartdiv7" class="chartdiv js-chartdiv">CHARTDIV7 - GBP PERFORMANCE PERIOD</div>
<div id="chartdiv8" class="chartdiv js-chartdiv">CHARTDIV8 - ZAR PERFORMANCE PERIOD</div>

CSS:

.ui-menu
{
    width: 250px;
    font-weight: 300;
    font-size: 10px;
}
.chartdiv
{
    width: 100%;
    height: 250px;
    background: #CCC;
    display: none;
}

Upvotes: 1

Rana Soyab
Rana Soyab

Reputation: 896

See try to reuse the code this is script for all you need

$(document).ready(function() {
            $('.chart').hide();
            $( 'div#chartdiv1' ).show();
            $('.showchart').click( function() {
                $('.chart').hide();
                $('#' + $(this).attr('data-chart')).show();
            });
        });

now 2 changes in html your link should be like

<a class="showchart" data-chart="chartdiv1">Unit Price</a> we have added class and data-chart attribute

now in chart div

<div id="chartdiv1" class="chart" style="width:100%; height:250px; background: #CCC">

add class chart

and try this

let me know this works for you or not ?

Upvotes: 1

Related Questions