To hide a tag using jquery

I have a div tag "tab-hidden" inside my master-page.aspx file and i am including my master-page in all my pages present in my project. But the issue is i have to hide that div tag from some pages in my project.

 <div class="tab-hidden" style="margin-top: 60px; margin-left: 203px;">  
         <div class="tabbing" id="ipi1">
             <a href="Client_PlaningInformation.aspx" onclick="landingdetails('ipi')">
               
                 Important planning information
            </a>
         </div>
         <div class="tabbing" id="ots1">
             <a href="Client_OrderYourStand.aspx" onclick="landingdetails('ots')">
                
                 Order Your Stand Services
             </a>
         </div>
         <div class="tabbing" id="marketing1" runat="server">
             <a href="#" onclick="landingdetails('marketing')">
               
                 Marketing
             </a>
         </div>
     </div>

Open in new window

sana khanAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
M. TariqConnect With a Mentor Application DeveloperCommented:
Hey Sana,
There are couple of ways to handle this, however the most straightforward one is, in the specific page, hide the tag using jquery:
$("#tab-hidden").hide()

Open in new window


You can also add the pages names in an array in the master-page, and on load you should get the current page name, if it is in the array then apply the hide function, otherwise do nothing.
0
 
HainKurtSr. System AnalystCommented:
add this to your page

<%@ Page  masterPageFile="~/MasterPage.master"%>
<%@ MasterType  virtualPath="~/MasterPage.master"%>

Open in new window


then give a unique id to that div

<div id="myTab" runat="server" class="tab-hidden" style="margin-top: 60px; margin-left: 203px;">   

Open in new window


then on any page

Master.myTab.visible=false

Open in new window

0
 
sana khanAuthor Commented:
This works for me
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
HainKurtSr. System AnalystCommented:
This works for me

no it does not :)

maybe this works...

$(".tab-hidden").hide()

Open in new window

1
 
sana khanAuthor Commented:
yes i have just added "." instead of "#"
0
 
HainKurtSr. System AnalystCommented:
and it flickers on browser...
initially visible, and gets hidden after page is loaded...
also, it is rendered on every page unnecessarily...

you should set visible=false on server side...
1
 
sana khanAuthor Commented:
on which page do i have to add this

<%@ Page  masterPageFile="~/MasterPage.master"%>
<%@ MasterType  virtualPath="~/MasterPage.master"%>

Open in new window

0
 
sana khanAuthor Commented:
and this will be on page load on the page where i have to hide the div tag

Master.myTab.visible=false

Open in new window

0
 
HainKurtSr. System AnalystCommented:
this should be on the pages that you want to refer to master

<%@ MasterType  virtualPath="~/MasterPage.master"%>

Open in new window


and this

Master.myTab.visible=false

Open in new window


on any page that you want to set it hidden
0
 
HainKurtSr. System AnalystCommented:
maybe we can use session for this purpose...

on master page.init, set session("showpanel")=true...
then on any page.load set session("showpanel")=false
and finally, on master page on prerender event use

myTab.visible = session("showpanel")

this method may be easier...
0
 
Julian HansenCommented:
You can do this with CSS by giving the body tag of each page a unique class.

<body class="home-page">
<body class="product-page">

Open in new window


You can then hide the tab relative to the page

.home-page .tab-hidden {
   display: none;
}

Open in new window

0
 
HainKurtSr. System AnalystCommented:
using any solution that deals with css/jQuery is not good and you should make them invisible on server side so it does not rendered at all...
1
 
sana khanAuthor Commented:
 protected void Page_Init(object sender, EventArgs e)
    {
        set Session["showpanel"] = true;
    }

    protected void Page_PreRender(object sender, EventArgs e)
    {
        myTab.Visible = (bool)Session["showpanel"];
    }

Open in new window


giving error in this line
 set Session["showpanel"] = true;

Open in new window


showing 2 errors please check below is the screenshot

Error1.png
Error2.png
0
 
sana khanAuthor Commented:
First screenshot error is of showpanel inside Page_Init and second screenshot error is of true after equal sign
0
 
Julian HansenCommented:
using any solution that deals with css/jQuery is not good and you should make them invisible on server side so it does not rendered at all...
You might want to contact  the Bootstrap crowd and run this by them. Much of the responsive design paradigm is based on hiding  / showing content for different media.
0
 
HainKurtSr. System AnalystCommented:
You might want to contact  the Bootstrap crowd and run this by them. Much of the responsive design paradigm is based on hiding  / showing content for different media.

this is nothing to do with bootstrap...

if that rendered part is taking 50K, adding that to each and every page and sending to client and hiding it on client side is just a NO NO if we can avoid this on server side... thats why we have server side coding... moving server side codes/logic to client side should be avoided...

this is very obvious and I don't see anything to argue about this :)
0
 
Julian HansenCommented:
this is very obvious and I don't see anything to argue about this :)
You stated
using any solution that deals with css/jQuery is not good
This general dismissal is not correct.

Bootsrap is relevant as the hiding and showing of content on a rendered page is standard practice. If the page has a large payload that needs to be excluded then yes you don't render that - but that is not what this question was asking. It was about not showing an element on certain pages which makes a CSS / jQuery solution perfectly acceptable.
0
 
HainKurtSr. System AnalystCommented:
hiding some elements initially and then show them on some events is different thing...
rendering some content which will never appear on the page is another thing...

we use jQuery or any css to temporarily show/display elements...
if it is never used on page and will be hidden all the time, we should not render it at all, ie, we should use server side to hide/make it invisible/do not render at all...

if this was any good, MS would not put any visible property on elements :)
or implement that visible thing on client side using css or implement using client side code...

I just pointed the client side issues
- page size will be larger
- load time will be slower
- there may be flickering issues (before page is fully loaded, those elements may be visible until page is loaded and jQuery kicks in and hides it)

also

it will increase bandwidth
increase resources used on web server
0
 
Julian HansenCommented:
hiding some elements initially and then show them on some events is different thing...
rendering some content which will never appear on the page is another thing...
In a responsive design you target a screen - it stays the same - content stays hidden permanently. On a different screen that content shows - that is not hiding and showing - it is exactly the case this post relates to and is a concept anyone who engages in responsive design is very familiar with.

Bottom line jQuery / CSS options are perfectly acceptable here - there is no reason to make statements that suggest otherwise.
0
 
HainKurtSr. System AnalystCommented:
the original issue is nothing like you describe

But the issue is i have to hide that div tag from some pages in my project.

so, putting unrelated data in pages and hide them every time is not a viable solution...
1
All Courses

From novice to tech pro — start learning today.