On page load: Only show specific information











up vote
1
down vote

favorite












I have a page that is going to have many many toggles on it, some created dynamically. I was wondering if I could load a page, which shows only a specific div, but the moment the user clicks a button a toggle is created (done this part) and the user is unable to see the version of the page that only shows one specific div unless they delete all the other content on the page.



I do not know if I have explained that well at all:



Start off showing only this content



enter image description here



On clicking the save button only show this...



enter image description here



My code does part of this already. Just honestly cannot work out how to even start the on page load part. I have looked at the jQuery on page load function but don't know if this is the best or only route.






   //hide text onclick

            $(document).ready(function() {

                var $p = $('p#menu_title');

                $("input#save_first_prod").click(function(event) {

                    event.preventDefault();

                    $p.css('display', 'none');

                });

            });



 function toggle_visibility(id) {

                var e = document.getElementById(id);

                if (e.style.display == 'block' || e.style.display == '')

                    e.style.display = 'none';

                else

                    e.style.display = 'block';

            }

.hidden {

    display: visible; 

}

div#first_product{

width: 50%;

margin-left: 301px;   

}



div#red_head{

background-color: #ed1c24;

height: 40px;

color: #fff;

padding-left: 15px;

line-height: 35px;

}



div#first_product{

background-color: #f1f1f2; 

height: 100%;

}



h3#menu{

color: #6d6e70;

padding-left: 15px;

}



/*OUTSIDE TOGGLE BUTTON*/

#products_tog_but{

background-color: #f8f9f9;

border: 1.5px dashed #999999;

width: 100%;

height: 40px;

border-radius: 5px;

}



div#hide_btn{

width:50%;

margin-left: 301px;

}

div id="hide_btn">

        <button id="products_tog_but" onclick="toggle_visibility('first_product')">Hello!</button>

        </div>

        

     <!-- TOGGLE BTN SECTION-->   

        <div id="first_product">

            <div id="red_head">

                <p id="menu_title" class ="hidden" onclick="hideText('text1')" > Add your first menu item</p>

            </div>

            <h3 id="menu">Menu Section</h3>



            <form name="first_prod" id="first_prod" enctype="multipart/form-data" action="testing.php" method="post" accept-charset="utf-8" >               



                <label id="cat_label" name="cat_label">Name</label>

                <input type="text" id="cat_name" name="cat_name" value="">



                <label id="desc_label" name="desc_label">Description</label>

                <input type="text" id="cat_desc" name="cat_desc" value="">



                <input type="Submit" id="save_first_prod" name="save_first_prod" onclick="toggle_visibility('first_product')" value=" + ADD"> 



            </form>





        </div>








javascript jquery html







share|improve this question
























  • are you trying to show something on loading time (before the $(document).ready function) or just on first interaction? You might need to clarify your question. it's not easy to understand what you're trying to achieve
    – Thatkookooguy
    Nov 8 at 9:10















up vote
1
down vote

favorite












I have a page that is going to have many many toggles on it, some created dynamically. I was wondering if I could load a page, which shows only a specific div, but the moment the user clicks a button a toggle is created (done this part) and the user is unable to see the version of the page that only shows one specific div unless they delete all the other content on the page.



I do not know if I have explained that well at all:



Start off showing only this content



enter image description here



On clicking the save button only show this...



enter image description here



My code does part of this already. Just honestly cannot work out how to even start the on page load part. I have looked at the jQuery on page load function but don't know if this is the best or only route.






   //hide text onclick

            $(document).ready(function() {

                var $p = $('p#menu_title');

                $("input#save_first_prod").click(function(event) {

                    event.preventDefault();

                    $p.css('display', 'none');

                });

            });



 function toggle_visibility(id) {

                var e = document.getElementById(id);

                if (e.style.display == 'block' || e.style.display == '')

                    e.style.display = 'none';

                else

                    e.style.display = 'block';

            }

.hidden {

    display: visible; 

}

div#first_product{

width: 50%;

margin-left: 301px;   

}



div#red_head{

background-color: #ed1c24;

height: 40px;

color: #fff;

padding-left: 15px;

line-height: 35px;

}



div#first_product{

background-color: #f1f1f2; 

height: 100%;

}



h3#menu{

color: #6d6e70;

padding-left: 15px;

}



/*OUTSIDE TOGGLE BUTTON*/

#products_tog_but{

background-color: #f8f9f9;

border: 1.5px dashed #999999;

width: 100%;

height: 40px;

border-radius: 5px;

}



div#hide_btn{

width:50%;

margin-left: 301px;

}

div id="hide_btn">

        <button id="products_tog_but" onclick="toggle_visibility('first_product')">Hello!</button>

        </div>

        

     <!-- TOGGLE BTN SECTION-->   

        <div id="first_product">

            <div id="red_head">

                <p id="menu_title" class ="hidden" onclick="hideText('text1')" > Add your first menu item</p>

            </div>

            <h3 id="menu">Menu Section</h3>



            <form name="first_prod" id="first_prod" enctype="multipart/form-data" action="testing.php" method="post" accept-charset="utf-8" >               



                <label id="cat_label" name="cat_label">Name</label>

                <input type="text" id="cat_name" name="cat_name" value="">



                <label id="desc_label" name="desc_label">Description</label>

                <input type="text" id="cat_desc" name="cat_desc" value="">



                <input type="Submit" id="save_first_prod" name="save_first_prod" onclick="toggle_visibility('first_product')" value=" + ADD"> 



            </form>





        </div>








javascript jquery html







share|improve this question
























  • are you trying to show something on loading time (before the $(document).ready function) or just on first interaction? You might need to clarify your question. it's not easy to understand what you're trying to achieve
    – Thatkookooguy
    Nov 8 at 9:10













up vote
1
down vote

favorite









up vote
1
down vote

favorite











I have a page that is going to have many many toggles on it, some created dynamically. I was wondering if I could load a page, which shows only a specific div, but the moment the user clicks a button a toggle is created (done this part) and the user is unable to see the version of the page that only shows one specific div unless they delete all the other content on the page.



I do not know if I have explained that well at all:



Start off showing only this content



enter image description here



On clicking the save button only show this...



enter image description here



My code does part of this already. Just honestly cannot work out how to even start the on page load part. I have looked at the jQuery on page load function but don't know if this is the best or only route.






   //hide text onclick

            $(document).ready(function() {

                var $p = $('p#menu_title');

                $("input#save_first_prod").click(function(event) {

                    event.preventDefault();

                    $p.css('display', 'none');

                });

            });



 function toggle_visibility(id) {

                var e = document.getElementById(id);

                if (e.style.display == 'block' || e.style.display == '')

                    e.style.display = 'none';

                else

                    e.style.display = 'block';

            }

.hidden {

    display: visible; 

}

div#first_product{

width: 50%;

margin-left: 301px;   

}



div#red_head{

background-color: #ed1c24;

height: 40px;

color: #fff;

padding-left: 15px;

line-height: 35px;

}



div#first_product{

background-color: #f1f1f2; 

height: 100%;

}



h3#menu{

color: #6d6e70;

padding-left: 15px;

}



/*OUTSIDE TOGGLE BUTTON*/

#products_tog_but{

background-color: #f8f9f9;

border: 1.5px dashed #999999;

width: 100%;

height: 40px;

border-radius: 5px;

}



div#hide_btn{

width:50%;

margin-left: 301px;

}

div id="hide_btn">

        <button id="products_tog_but" onclick="toggle_visibility('first_product')">Hello!</button>

        </div>

        

     <!-- TOGGLE BTN SECTION-->   

        <div id="first_product">

            <div id="red_head">

                <p id="menu_title" class ="hidden" onclick="hideText('text1')" > Add your first menu item</p>

            </div>

            <h3 id="menu">Menu Section</h3>



            <form name="first_prod" id="first_prod" enctype="multipart/form-data" action="testing.php" method="post" accept-charset="utf-8" >               



                <label id="cat_label" name="cat_label">Name</label>

                <input type="text" id="cat_name" name="cat_name" value="">



                <label id="desc_label" name="desc_label">Description</label>

                <input type="text" id="cat_desc" name="cat_desc" value="">



                <input type="Submit" id="save_first_prod" name="save_first_prod" onclick="toggle_visibility('first_product')" value=" + ADD"> 



            </form>





        </div>








javascript jquery html







share|improve this question















I have a page that is going to have many many toggles on it, some created dynamically. I was wondering if I could load a page, which shows only a specific div, but the moment the user clicks a button a toggle is created (done this part) and the user is unable to see the version of the page that only shows one specific div unless they delete all the other content on the page.



I do not know if I have explained that well at all:



Start off showing only this content



enter image description here



On clicking the save button only show this...



enter image description here



My code does part of this already. Just honestly cannot work out how to even start the on page load part. I have looked at the jQuery on page load function but don't know if this is the best or only route.






   //hide text onclick

            $(document).ready(function() {

                var $p = $('p#menu_title');

                $("input#save_first_prod").click(function(event) {

                    event.preventDefault();

                    $p.css('display', 'none');

                });

            });



 function toggle_visibility(id) {

                var e = document.getElementById(id);

                if (e.style.display == 'block' || e.style.display == '')

                    e.style.display = 'none';

                else

                    e.style.display = 'block';

            }

.hidden {

    display: visible; 

}

div#first_product{

width: 50%;

margin-left: 301px;   

}



div#red_head{

background-color: #ed1c24;

height: 40px;

color: #fff;

padding-left: 15px;

line-height: 35px;

}



div#first_product{

background-color: #f1f1f2; 

height: 100%;

}



h3#menu{

color: #6d6e70;

padding-left: 15px;

}



/*OUTSIDE TOGGLE BUTTON*/

#products_tog_but{

background-color: #f8f9f9;

border: 1.5px dashed #999999;

width: 100%;

height: 40px;

border-radius: 5px;

}



div#hide_btn{

width:50%;

margin-left: 301px;

}

div id="hide_btn">

        <button id="products_tog_but" onclick="toggle_visibility('first_product')">Hello!</button>

        </div>

        

     <!-- TOGGLE BTN SECTION-->   

        <div id="first_product">

            <div id="red_head">

                <p id="menu_title" class ="hidden" onclick="hideText('text1')" > Add your first menu item</p>

            </div>

            <h3 id="menu">Menu Section</h3>



            <form name="first_prod" id="first_prod" enctype="multipart/form-data" action="testing.php" method="post" accept-charset="utf-8" >               



                <label id="cat_label" name="cat_label">Name</label>

                <input type="text" id="cat_name" name="cat_name" value="">



                <label id="desc_label" name="desc_label">Description</label>

                <input type="text" id="cat_desc" name="cat_desc" value="">



                <input type="Submit" id="save_first_prod" name="save_first_prod" onclick="toggle_visibility('first_product')" value=" + ADD"> 



            </form>





        </div>








   //hide text onclick

            $(document).ready(function() {

                var $p = $('p#menu_title');

                $("input#save_first_prod").click(function(event) {

                    event.preventDefault();

                    $p.css('display', 'none');

                });

            });



 function toggle_visibility(id) {

                var e = document.getElementById(id);

                if (e.style.display == 'block' || e.style.display == '')

                    e.style.display = 'none';

                else

                    e.style.display = 'block';

            }

.hidden {

    display: visible; 

}

div#first_product{

width: 50%;

margin-left: 301px;   

}



div#red_head{

background-color: #ed1c24;

height: 40px;

color: #fff;

padding-left: 15px;

line-height: 35px;

}



div#first_product{

background-color: #f1f1f2; 

height: 100%;

}



h3#menu{

color: #6d6e70;

padding-left: 15px;

}



/*OUTSIDE TOGGLE BUTTON*/

#products_tog_but{

background-color: #f8f9f9;

border: 1.5px dashed #999999;

width: 100%;

height: 40px;

border-radius: 5px;

}



div#hide_btn{

width:50%;

margin-left: 301px;

}

div id="hide_btn">

        <button id="products_tog_but" onclick="toggle_visibility('first_product')">Hello!</button>

        </div>

        

     <!-- TOGGLE BTN SECTION-->   

        <div id="first_product">

            <div id="red_head">

                <p id="menu_title" class ="hidden" onclick="hideText('text1')" > Add your first menu item</p>

            </div>

            <h3 id="menu">Menu Section</h3>



            <form name="first_prod" id="first_prod" enctype="multipart/form-data" action="testing.php" method="post" accept-charset="utf-8" >               



                <label id="cat_label" name="cat_label">Name</label>

                <input type="text" id="cat_name" name="cat_name" value="">



                <label id="desc_label" name="desc_label">Description</label>

                <input type="text" id="cat_desc" name="cat_desc" value="">



                <input type="Submit" id="save_first_prod" name="save_first_prod" onclick="toggle_visibility('first_product')" value=" + ADD"> 



            </form>





        </div>





   //hide text onclick

            $(document).ready(function() {

                var $p = $('p#menu_title');

                $("input#save_first_prod").click(function(event) {

                    event.preventDefault();

                    $p.css('display', 'none');

                });

            });



 function toggle_visibility(id) {

                var e = document.getElementById(id);

                if (e.style.display == 'block' || e.style.display == '')

                    e.style.display = 'none';

                else

                    e.style.display = 'block';

            }

.hidden {

    display: visible; 

}

div#first_product{

width: 50%;

margin-left: 301px;   

}



div#red_head{

background-color: #ed1c24;

height: 40px;

color: #fff;

padding-left: 15px;

line-height: 35px;

}



div#first_product{

background-color: #f1f1f2; 

height: 100%;

}



h3#menu{

color: #6d6e70;

padding-left: 15px;

}



/*OUTSIDE TOGGLE BUTTON*/

#products_tog_but{

background-color: #f8f9f9;

border: 1.5px dashed #999999;

width: 100%;

height: 40px;

border-radius: 5px;

}



div#hide_btn{

width:50%;

margin-left: 301px;

}

div id="hide_btn">

        <button id="products_tog_but" onclick="toggle_visibility('first_product')">Hello!</button>

        </div>

        

     <!-- TOGGLE BTN SECTION-->   

        <div id="first_product">

            <div id="red_head">

                <p id="menu_title" class ="hidden" onclick="hideText('text1')" > Add your first menu item</p>

            </div>

            <h3 id="menu">Menu Section</h3>



            <form name="first_prod" id="first_prod" enctype="multipart/form-data" action="testing.php" method="post" accept-charset="utf-8" >               



                <label id="cat_label" name="cat_label">Name</label>

                <input type="text" id="cat_name" name="cat_name" value="">



                <label id="desc_label" name="desc_label">Description</label>

                <input type="text" id="cat_desc" name="cat_desc" value="">



                <input type="Submit" id="save_first_prod" name="save_first_prod" onclick="toggle_visibility('first_product')" value=" + ADD"> 



            </form>





        </div>





javascript jquery html




javascript jquery html






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 8 at 8:43









Flimzy

36.6k96496




36.6k96496










asked Apr 10 '16 at 14:11









Monroe

927




927












  • are you trying to show something on loading time (before the $(document).ready function) or just on first interaction? You might need to clarify your question. it's not easy to understand what you're trying to achieve
    – Thatkookooguy
    Nov 8 at 9:10


















  • are you trying to show something on loading time (before the $(document).ready function) or just on first interaction? You might need to clarify your question. it's not easy to understand what you're trying to achieve
    – Thatkookooguy
    Nov 8 at 9:10
















are you trying to show something on loading time (before the $(document).ready function) or just on first interaction? You might need to clarify your question. it's not easy to understand what you're trying to achieve
– Thatkookooguy
Nov 8 at 9:10




are you trying to show something on loading time (before the $(document).ready function) or just on first interaction? You might need to clarify your question. it's not easy to understand what you're trying to achieve
– Thatkookooguy
Nov 8 at 9:10

















active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f36530824%2fon-page-load-only-show-specific-information%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown






























active

oldest

votes













active

oldest

votes









active

oldest

votes






active

oldest

votes
















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f36530824%2fon-page-load-only-show-specific-information%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-

這個網誌中的熱門文章

Academy of Television Arts & Sciences

圖片
American television organization Academy of Television Arts & Sciences Founded 1946 ; 73 years ago  ( 1946 ) Location North Hollywood, California, United States Area served Television industry Product Emmy Awards Key people Frank Scherma ( Chairman and CEO ) Website televisionacademy.com [redirects to emmys.com , official website of the Emmys and the Television Academy The Academy of Television Arts & Sciences ( ATAS ), also colloquially known as the Television Academy , is a professional honorary organization dedicated to the advancement of the television industry in the United States. Founded in 1946, the organization presents the Primetime Emmy Awards, an annual ceremony honoring achievement in U.S. primetime television. Contents 1 History 2 Emmy Award 3 Publications and programs 4 Current governance 4.1 Board of Governors 5 Television Academy honors 5.1 1st Annual (2008) 5.2 2nd Annual (2009)...
閱讀完整內容

L'Équipe

圖片
For other uses, see Équipe (disambiguation). L'Équipe The front page of L'Équipe on 4 July 2011 Type Daily newspaper Format Tabloid Owner(s) Éditions Philippe Amaury Editor François Morinière Editor-in-chief Fabrice Jouhaud Founded 1946 Language French Headquarters Boulogne-Billancourt ISSN 0153-1069 Website www.lequipe.fr L'Équipe ( pronounced  [lekip] , French for "the team") is a French nationwide daily newspaper devoted to sport, owned by Éditions Philippe Amaury. The paper is noted for coverage of association football , rugby, motorsport and cycling. Its predecessor was L'Auto , a general sports paper whose name reflected not any narrow interest but the excitement of the time in car racing. L'Auto originated the Tour de France cycling stage race in 1903 as a circulation booster. The race leader's yellow jersey (French: maillot jaune ) was instituted in 1919, probably to reflect the dist...
閱讀完整內容

1995 France bombings

圖片
This article is a rough translation from French . It may have been generated by a computer or by a translator without dual proficiency. Please help to enhance the translation. The original article is under "français" in the "languages" sidebar. See this article's entry on Pages needing translation into English for discussion. 1995 France bombings Part of Algerian Civil War (spillover) Plaque commemorating the victims of the Saint-Michel station bombing on 25 July 1995 Location Paris and Lyon, France Date 25 July 1995  ( 1995-07-25 ) – 17 October 1995  ( 1995-10-17 ) Weapons Improvised explosive devices, school bombing Deaths 8 Non-fatal injuries 157 Perpetrator Armed Islamic Group Motive To induce the French government to withdraw support from the Algerian government during the Algerian Civil War The 1995 bombings in France were carried out by the Armed Islamic Group (GIA), who were broadening the Alger...
閱讀完整內容