Hi all, here is what I want to achieve: I want to create a page witch lists tour data, locations, artists and orchesters. Therefor I created a page (concerts.php) for the dates, which fetches all the data of artists, locations, and orchesters with relations from an other cloneable template named artist_loc.php. The 3 kinds of infos in artist_loc.php are separated by folders " Orchester, Artist, Location".

I want to store all the data in that single template to keep the backend tidy. Each page of artist_loc.php has 3 groups: Orchester, Artist, Location to store the data.

To make it more easy for the user I want, when the folder "Orchester" is chosen from the folder dropdown menu in the page backend. The two other groups Artist and Location should disappear.

I googled for hints and found some. But as I'm not a JS pro it's working only half the way.
Groups are displayed when choosing in the dropdown, but are not disappearing when choosing an other option.

Any Ideas?

here my code

Code: Select all

<cms:editable name='js' type='message' order='10'>
  
<script> 
   
var elem = document.getElementById("f_k_page_folder_id");
elem.onchange = function(){
    var hiddenDiv = document.getElementById("f_orchester");
    var hiddenDiv = document.getElementById("f_location");
    var hiddenDiv = document.getElementById("f_artist");
    hiddenDiv.style.display = (this.value == "") ? "none":"block";
};


</script>  
 <style>
     #f_orchester {display: none}
     #f_location {display: none}
     #f_artist {display: none}
</style> 
 
  
</cms:editable>

Sorry for my bad English and thank you very much!!!!

[trendoman]

This looks better:
http://jsfiddle.net/jcdhn6u1/

Works perfect! Thank YOU!!!

I found that fiddle before too, but now I figured out to replace the "$" with "jQuery" to make it work.

here the new code

Code: Select all

<script type="text/javascript">
jQuery(document).ready(function(){
        jQuery("#f_k_page_folder_id").change(function(){
            jQuery( "#f_k_page_folder_id option:selected").each(function(){
                if(jQuery(this).attr("value")=="10"){
                    jQuery(".group-wrapper").hide(500);
                    jQuery("#f_dirigent").show(500);
                }
                if(jQuery(this).attr("value")=="11"){
                    jQuery(".group-wrapper").hide(500);
                    jQuery("#f_orchester").show(500);
                }
                if(jQuery(this).attr("value")=="9"){
                    jQuery(".group-wrapper").hide(500);
                    jQuery("#f_ort").show(500);
                }
                
            });
        }).change();
    });
</script>

This looks better:
http://jsfiddle.net/jcdhn6u1/

Thx mate! Thats help me too!