jquery to show invisible div

Question

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:

<div class="literaltext">
        <p> We utilize two types of systems for mixing EnerBurn&reg; with your fuel supply to deliver it to your diesel engine,<br /> On-Board systems and Bulk Fueling systems. Click on an item below for more information.</p>
        <ul class="ulGreen">
            <li><b>On-Board systems - Road Vehicle</b><span style="color:black;"> (See an installation picture<a href="#" onclick="picDisplay('onBoardVehiclepicdisplay')">here</a>)</span> </li>
            <li><b>On-Board systems - Marine Vessel</b><span style="color:black;"> (See an installation picture<a href="#" onclick="picDisplay('onBoardVesselpicdisplay')">here</a>)</span> </li>
            <li><b>On-Board systems - Fueling Barge</b><span style="color:black;"> (See an installation picture<a href="#" onclick="picDisplay('onBoardBargepicdisplay')">here</a>)</span> </li>
            
        </ul>
    </div>

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

<div id="onBoardVehiclepicdisplay" class="invisible">
        <fieldset class="dynamicinjectionpics">
            <legend>"Schlumberger On-Board Injection Unit"</legend>
             <img Height="300px" Width="400px" alt=""
             src="Images/InjectionUnitPictures/SchlumbergerInjectionUnit_FrackTruck.jpg"/>&nbsp;&nbsp;&nbsp;
             <img Height="300px" Width="400px" alt=""
             src="Images/InjectionUnitPictures/SchlumbergerInjectionUnit_FrackTruck_withEnclosure.jpg"/>
             <br /><span id="Image1Text" runat="server">Typical injection unit installation (shown here on a Fracking Unit)</span>

        </fieldset>
    </div>
    <div id="onBoardVesselpicdisplay" class="invisible">
        <fieldset class="dynamicinjectionpics">
            <legend>"Vessel Fuel Intake Line Mounted Injection System"</legend>
             <img Height="300px" Width="400px" alt=""
             src="Images/InjectionUnitPictures/SP-600 Injector.jpg"/>&nbsp;&nbsp;&nbsp;
             <img Height="300px" Width="400px" alt=""
             src="Images/InjectionUnitPictures/MarionInjector Installation.JPG"/>
             <br /><span id="Span1" runat="server">Typical injection unit installation for single vessel</span>

        </fieldset>
    </div>

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)

<script>
    $(function () {
        function picDisplay(divId) {
            $("[id='onBoardVehiclepicdisplay']").toggleClass('visible');

        }
    });

</script>

Answer 1

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.
});

Answer 2

Here's what I'd do:

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

<a href="#" data-rel="onBoardVehiclepicdisplay">here</a>

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 3

Try this:

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

You should read this: id selector.

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

<li><a href="#onBoardVehiclepicdisplay">...</a>

$('li > a').click(function (event) {
    event.preventDefault(); //to block the link

    var id = $(this).attr('href');
    $(id).toggleClass('visible');
});

Answer 4

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:

<script>
    $(function () {
        function picDisplay(divId) {
            $("[id*='onBoardVehiclepicdisplay']").toggleClass('visible');

        }
    });

</script>

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

Answer 5

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.

<div id="onBoardVesselpicdisplay">
</div>

<input id="onBoardButton" />

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 6

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");
}