how can i shorten the following ?

[atulthakre]

i have the following html and javascript, how can i shorten the javascript ?

html and javascript at - http://jsfiddle.net/GZhvM/2/

[Ingolme]

It could be shortened by changing the HTML a bit:

HTML

<button class="opener" data-dialog="1">open the dialog</button><div id="dialog1" class="dialog" title="Dialog Title">I'm a dialog</div><button class="opener" data-dialog="2">open the dialog 2 </button><div id="dialog2" class="dialog" title="Dialog Title">I'm a dialog 2</div><button class="opener" data-dialog="3">open the dialog 3 </button><div id="dialog3" class="dialog" title="Dialog Title">I'm a dialog 3</div>

Javascript

$( ".dialog" ).dialog({ autoOpen: false });$( ".dialog" ).dialog( "option", "width", 500 );$( ".dialog" ).dialog( "option", "height", 400 );$( ".opener" ).click(function() {    var selector = "#dialog" + $(this).data("dialog");    $(selector).dialog( "open" );});

[dsonesuk]

Change id ref to classes

<button class="opener">open the dialog</button><div class="dialog" title="Dialog Title">I'm a dialog</div><button class="opener">open the dialog 2 </button><div class="dialog" title="Dialog Title">I'm a dialog 2</div><button class="opener">open the dialog 3 </button><div class="dialog" title="Dialog Title">I'm a dialog 3</div>

use index of button with class 'opener' to reference its 'dialog' box index

$( ".dialog" ).dialog({ autoOpen: false });$( ".opener" ).click(function() {        //$('.dialog').dialog( "close" ); //will close all opened dialog box before opening new one if needed   var curr_open_index = $('.opener').index(this)    $('.dialog:eq('+curr_open_index +')').dialog( "open" );});$( ".dialog" ).dialog( "option", "width", 500 );$( ".dialog" ).dialog( "option", "height", 400 );

No extra attributes, in fact you lose one the id ref

Edited May 17, 2014 by dsonesuk