jquery to show invisible div

jquery to show invisible div

I have a few questions as I am new to ASP.Net

1. I have an aspx page set up as follows;

   Unordered list area hidden div hidden div

The unordered list code:

          
 We utilize two types of systems for mixing EnerBurn? with your fuel supply to deliver it to your diesel engine,
 On-Board systems and Bulk Fueling systems. Click on an item below for more information.
          
              
On-Board systems - Road Vehicle (See an installation picturehere) 
              
On-Board systems - Marine Vessel (See an installation picturehere) 
              
On-Board systems - Fueling Barge (See an installation picturehere) 
            
      
  

The hidden divs are set up like so;(only showing 2 of 3 for brevity)

          
              
"Schlumberger On-Board Injection Unit"
                                                
Typical injection unit installation (shown here on a Fracking Unit)            
      
      
          
              
"Vessel Fuel Intake Line Mounted Injection System"
                                                
Typical injection unit installation for single vessel            
      
  

I want to use JQuery to change the class of the hidden divs to visible when they click on the anchor tag using the specified onclick function. Is this the best way to do this? Should I have an update panel around the hidden divs? The first method i used was to call a page reload where i injected the innerHTML for the selected tag's pictures, it works but I'm assuming that's an amateurish and less effective way of accomplishing this.

This query didn't work;(couldn't get the picDisplay function to recognize the parameter so I hard coded one of the div id's to try to get it to work)

Answer by GG. for jquery to show invisible div

Try this:

$('#onBoardVehiclepicdisplay').toggleClass('visible');  

You should read this: id selector.

You should also replace the onclick attribute (deprecated) with:

...  

$('li > a').click(function (event) {      event.preventDefault(); //to block the link        var id = $(this).attr('href');      $(id).toggleClass('visible');  });  

Answer by Oli for jquery to show invisible div

Actually there are two simple ways to do it :

1. Use .css()
2. Use .toggleClass() or .hasClass(), .removeClass() and .addClass()

I think the simplest on is by using .css()

You would have :

function toggleVisible() {      if($(this).css("display") == "none")          $(this).css("display", "block");      else          $(this).css("display", "none");  }  

Answer by Chris Dixon for jquery to show invisible div

1. No, you don't need an update panel to achieve what you're trying to do.

2. Secondly, we need a bit more information on your scenario to get the best result for you. Where are the buttons located, and is there going to be one button allocated to each that you're trying to make visible?

i.e.

would be:

$('#onBoardButton').on('click', function() {      $('#onBoardVesselpicdisplay').toggleClass('visible');  });  

If your scenario is more complicated than that, then please explain what you're trying to do.

Answer by MassivePenguin for jquery to show invisible div

Here's what I'd do:

Add a data-rel tag to each link, which refers to the relevant hidden div:

here  

Use the following jQuery:

$('.ulGreen').delegate('li a', 'click', function(e){      e.preventDefault();      var target = $(this).attr('data-rel');      $('#' + target).toggleClass('invisible'); // or show()/hide()  });  

EDIT - missed out the '#' from the toggleclass target. Working example here: http://jsfiddle.net/aF5Pg/

Answer by Habibillah for jquery to show invisible div

asp.net as I know will generate random client ID base on component id. so you can use contain selector on Jquery.

for your code, just modify to:

you can also manipulate using end with selector or start with selector

Answer by 5arx for jquery to show invisible div

Here's another way of doing it. It makes use of the fact you can add multiple classes to HTML elements. First hide all the divs that are 'hideable' and onclick find the div you need to show and show it. I think a more modern way of doing it would be to use the data-rel attribute (but I'm at work and too busy to look it up - I haven't fully adopted it yet)

The divs are all hidden on load:

$(document).ready(function() {      //Hide all of them initially      $('.toHide').hide();  });  

On a click of an anchor inside an LI the class name of the div to show is assembled and JQuery.show() is used to unhide it.

$('LI A').click(function() {      $('.toHide').hide(); //hide all the divs first       $('.div-' +    ($(this).attr('class'))).show(); //reveal the one you want.  });  

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72