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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

M. TariqApplication 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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.