Jump to content
Please Use CODE Tags

div content change on button click? JS/JQ/HTML

Flanelman
By Flanelman
in Programming
 Share
Go to solution Solved by FJLJ,

NVM wont be needed I see the problem..

 

with JQuery you will need to put your script  

<script type="text/javascript">
    $('#btnClick').on('click',function(){
          if($('.add_student').css('display')!='none'){
          	$('.del_student').show();
            $('.add_student').hide();
          }else if($('.del_student').css('display')!='none'){
              $('.add_student').show();
              $('.del_student').hide();
          }
      });
    </script>

at the bottom of the page... just before the </body> tag

  

<html>
  <head>
    <meta charset="utf-8">
    <title>  add/delete  </title>
    <!-- css file for the page linked below. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="checkpoint.css">


  </head>
  <body>
  <div class="container">
    <div class="header">
      <!-- navigation to load the other pages below -->
      <a href="marking.html" class="nc">Marking</a>
      <a href="#" class="currentpage">Staff</a>
      <a href="students.html" class = "nc">Students</a>
      <a href="" class="nclogin"> Log In</a>

    </div> <!-- header div ends here -->
    <div class="content">
      <div class="card"> 
        <h1>Add/Delete Student</h1>
      </div>

<button id="btnClick" class="switchBtn">Toggle</button>
      <div class="results2">
        <div class="add_student">

          <form action="/action_page.php">
              <h1>Add Student</h1>
              <label>Student ID : </label> <input type="text" name="studentnum" required><br>
              <label>First name : </label><input type="text" name="firstname" required><br>
              <label>Last name : </label> <input type="text" name="lastname" required><br>
              <input type="submit" class="switchBtn2" value="Submit">
          </form>
        </div>

        <div class="del_student">
          <h1>Delete Student</h1>
          <!-- inputs to search will go here -->
        </div>
      </div>
     <!-- add a selector to choose whether you delete or add. -->
    </div> <!--content div ends here -->

    <div class="footer">
    </div> <!-- footer ends here -->
  </div>  <!-- container div ends here -->
  
    <!-- script to switch the content shown from add to delete -->
  <script type="text/javascript">
    $('#btnClick').on('click',function(){
          if($('.add_student').css('display')!='none'){
          	$('.del_student').show();
            $('.add_student').hide();
          }else if($('.del_student').css('display')!='none'){
              $('.add_student').show();
              $('.del_student').hide();
          }
      });
    </script>
  </body>
</html>

cheers ;)

Posted

Hey guys,
 

So I want to have an area on my page used for both adding and deleting students, when the page loads I want it to display the add student div, but then when the button is clicked I want it to switch to the delete student div and vice versa.

I've been trying to use stack overflow to get an answer but every time I try rework another answer into mine I get really confused and muddled up since I'm new to JavaScript.

Here's the code I've got at the moment:

  

<!-- script -->
<script type="text/javascript">

    $('#btnClick').on('click',function(){
        if($('#add_student').css('display')!='none'){
        	$('#del_student').show().siblings('div').hide();
        }else if($('#del_student').css('display')!='none'){
            $('#add_student').show().siblings('div').hide();
        }
    });

</script>

<!-- html -->
<button id="btnClick" class="switchBtn">Delete Student</button>

<div class="results2">
   <div class="add_student">
  	 <h1>Add Student</h1>
  	 <!-- inputs to add will go here -->
  	 </div>

   <div class="del_student">
   	 <h1>Delete Student</h1>
     <!-- inputs to search will go here -->
     </div>

Would greatly appreciate any help, been stuck on this for a while now. Thanks in advance :)

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Howdy!

 

If i understand correctly... you want to...

1.by default show the add and hide the delete.

2.when a button is pressed you want to hide add and show delete.

3.you want the button to also toggle back if pressed again and continue.

 

one problem i see in your code is that you are using the element ID search within jqeury '#' instead of the class search '.'

also I'm assuming you have css defined to initialize del_student with display none. lastly you should not need to hide each of the childred as if the container is not able to display they will not either. 

 

this section of code should yield your results.

  

$('#btnClick').on('click',function(){
        if($('.add_student').css('display')!='none'){
        	$('.del_student').show();
          $('.add_student').hide();
        }else if($('.del_student').css('display')!='none'){
            $('.add_student').show();
            $('.del_student').hide();
        }
    });

also here is a JSfiddle for ya to test.

https://jsfiddle.net/t8zjpefy/2/

 

Hope that helps.

-Frank

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
39 minutes ago, FJLJ said:

Snip

 

Hey Frank, thanks for the response! That is exactly what I'm after, however I tried that code on my page and it still didn't work which was odd since the JSFiddle works, I even copied the entire code from JSFiddle and replaced what I had In my code to no avail and then even copied it back to make sure I didn't mess something up and that worked still. Any ideas what could be going on there? It's working, just not on my page? Even tried clearing my cache, pretty confused. 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

hmmm depending on where it is hosted or if it is behind a cache wall... you may want to add an incremental 'query' to your script includes to make sure they push passed cache. 

 

IE  

<script src="somejavascript.js?132" />

If you would like a hand directly to be able to really see what might be causing this.. a bit more context is needed, or a link. try checking console for any errors?

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
6 minutes ago, FJLJ said:

Snip

 

It's hosted on my Uni's servers so should be fine, an error only appeared in the console after I added that script line you just posted, before that nothing. The error was a 404 can't find resource.

Here's the entire code, sorry it's a bit messy: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>  add/delete  </title>
    <!-- css file for the page linked below. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="checkpoint.css">

  <!-- script to switch the content shown from add to delete -->
    <script type="text/javascript">
    $('#btnClick').on('click',function(){
          if($('.add_student').css('display')!='none'){
          	$('.del_student').show();
            $('.add_student').hide();
          }else if($('.del_student').css('display')!='none'){
              $('.add_student').show();
              $('.del_student').hide();
          }
      });
    </script>
  </head>
  <body>
  <div class="container">
    <div class="header">
      <!-- navigation to load the other pages below -->
      <a href="marking.html" class="nc">Marking</a>
      <a href="#" class="currentpage">Staff</a>
      <a href="students.html" class = "nc">Students</a>
      <a href="" class="nclogin"> Log In</a>

    </div> <!-- header div ends here -->
    <div class="content">
      <div class="card"> 
        <h1>Add/Delete Student</h1>
      </div>

<button id="btnClick" class="switchBtn">Toggle</button>
      <div class="results2">
        <div class="add_student">

          <form action="/action_page.php">
              <h1>Add Student</h1>
              <label>Student ID : </label> <input type="text" name="studentnum" required><br>
              <label>First name : </label><input type="text" name="firstname" required><br>
              <label>Last name : </label> <input type="text" name="lastname" required><br>
              <input type="submit" class="switchBtn2" value="Submit">
          </form>
        </div>

        <div class="del_student">
          <h1>Delete Student</h1>
          <!-- inputs to search will go here -->
        </div>
      </div>
     <!-- add a selector to choose whether you delete or add. -->
    </div> <!--content div ends here -->

    <div class="footer">
    </div> <!-- footer ends here -->
  </div>  <!-- container div ends here -->
  </body>
</html>

Thanks again for the help. :)

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
1 minute ago, FJLJ said:

For sure, I will check it out right now, could i also get the css file? unless it is too large.. lol ;)

Haha it is pretty big but here you go :) (it's pretty basic atm)
  

/* removing the white border around the web page below: */
html{
  height: 100%;
  width: 100%;
}
body {
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: 0px;
 /* background with a gradient, suitable for different browsers */
 /* For browsers that do not support gradients */

  background: -webkit-linear-gradient(#191922, #23232D); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#191922, #23232D); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#191922, #23232D); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#191922, #23232D); /* Standard syntax */
}

.container
{
  height: 100%;
  width: 100%;
}
.content
{
  height:850px;
  width: 1878px;
  background-color: #23232D;
  margin-left: 20px;

    border-width: 1px;
    border-style: solid;
    -webkit-border-image:
      -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image:
      -webkit-linear-gradient(#C2C2CA, rgba(0, 0, 0, 0)) 1 50%;
    -moz-border-image:
      -moz-linear-gradient(#C2C2CA, rgba(0, 0, 0, 0)) 1 50%;
    -o-border-image:
      -o-linear-gradient(#C2C2CA, rgba(0, 0, 0, 0)) 1 50%;
    border-image:
      linear-gradient(to bottom, #C2C2CA, rgba(0, 0, 0, 0)) 1 50%;
}

div.card {
    width: 1877px;
    height:130px;
    background-color: #191922;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    background: -webkit-linear-gradient(#2D2D37, #191922); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#2D2D37, #191922); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#2D2D37, #191922); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#2D2D37, #191922); /* Standard syntax */
}
.card h1
{
  margin-top: 0px;
  padding-top: 0px;
  padding-bottom: 15px;
}

.content h1
{
  font-weight: 500;
  color: #C2C2CA;
  text-decoration: none;
  font-family: segoe ui light;
  font-size: 90px;
  text-align: center;
}
.container .header
{
  padding-top: 15px;
  padding-bottom: 20px;
  width: 97.05%;
  margin-left: 3px;
  background-color: #191922;
  margin-left: 1.05%;
  margin-right: -1%;
  padding-left: 20px;
  border-width: 2px;
  border-bottom: 1px solid #C2C2CA;


}
/*  Changing the look of the links here  */
.header a.nc
{
  color: #C2C2CA;
  font-size: 30px;
  margin-left: 50px;
  text-decoration: none;
  font-family: segoe ui light;
  margin-top: 15px;

}
.header a.nclogin
{
  margin-left: 1225px;
  color: #C2C2CA;
  font-size: 30px;

  text-decoration: none;
  font-family: segoe ui light;
  margin-top: 15px;
}
.header a:hover
{
  color:#fff;
  text-shadow: 0 0 10px #FFf
}
.currentpage
{
  color:#fff;
  text-shadow: 0 0 10px #FFf;
  font-size: 30px;
  margin-left: 50px;
  text-decoration: none;
  font-family: segoe ui light;
  margin-top: 15px;
}
.content .studentSel
{
  margin-left: 90px;
}
.content .studentSel .listbox
{
  width: 500px;
    height: 40px;
    font-size: 25px;

    margin-top: 50px;
    margin-left: 35px;

    -webkit-appearance: button;
     -webkit-border-radius: 2px;
     -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
     -webkit-padding-end: 20px;
     -webkit-padding-start: 2px;
     -webkit-user-select: none;
     background-image: url(http://i62.tinypic.com/15xvbd5.png),
      -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #F4F4F4);
     background-position: 97% center;
     background-repeat: no-repeat;
     border: 1px solid #AAA;
     color: #000;
     font-size: inherit;
     overflow: hidden;
     padding: 5px 10px;
     text-overflow: ellipsis;
     white-space: nowrap;
     margin-top: 50px;
       font-size: 30px;

}
.content .studentSel .listboxSmall
{
  width: 150px;
    height: 40px;
    font-size: 25px;

    margin-top: 50px;
    margin-left: 35px;

    -webkit-appearance: button;
     -webkit-border-radius: 2px;
     -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
     -webkit-padding-end: 20px;
     -webkit-padding-start: 2px;
     -webkit-user-select: none;
     background-image: url(http://i62.tinypic.com/15xvbd5.png),
      -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #F4F4F4);
     background-position: 97% center;
     background-repeat: no-repeat;
     border: 1px solid #AAA;
     color: #000;
     font-size: inherit;
     overflow: hidden;
     padding: 5px 10px;
     text-overflow: ellipsis;
     white-space: nowrap;
     margin-top: 50px;
       font-size: 30px;
}
.content .studentSel label
{
  font-size: 40px;
  text-decoration: none;
  font-family: segoe ui light;
  padding-top: -15px;
  color: #fff;
  margin-left: 70px;
}
.content .studentSel2 label
{
  font-size: 40px;
  text-decoration: none;
  font-family: segoe ui light;
  padding-top: -15px;
  color: #fff;
  margin-left: 450px;
}
.results2 label
{
  font-size: 40px;
  text-decoration: none;
  font-family: segoe ui light;
  padding-top: -15px;
  color: #fff;
  text-align: center;

}
.content input[type=password]
{

  color: #000;
  padding-left: 10px;
  width: 250px;
  height: 40px;
  font-size: 30px;
}
.content input[type=text]
{

    margin-top: 50px;
  color: #000;
  padding-left: 20px;
  width: 600px;
  height: 40px;
  font-size: 30px;
}

div.results {
    margin: auto;
    width: 1300px;
    margin-top: 50px;
    height:610px;
    background-color: #191922;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    background: -webkit-linear-gradient(#2D2D37, #191922); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#2D2D37, #191922); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#2D2D37, #191922); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#2D2D37, #191922); /* Standard syntax */
}
div.results2 {
    margin: auto;
    width: 1300px;
    margin-top: 30px;
    height:550px;
    background-color: #191922;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    background: -webkit-linear-gradient(#2D2D37, #191922); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#2D2D37, #191922); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#2D2D37, #191922); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#2D2D37, #191922); /* Standard syntax */
}
div.btns
{
  margin-left: 450px;
  margin-top: 50px;
}
/* smaller version of the button - same style*/
.content .switchBtn
{
  margin-top: 40px;
  width: 400px;
  height: 50px;
  font-size: 30px;
  font-family: segoe ui light;
  margin-left: 800px;
  padding-bottom: -15px;
}
.content .switchBtn:hover
{
  margin-top: 40px;
  width: 400px;
  height: 50px;
  font-size: 30px;
  font-family: segoe ui light;
  background-color: #C2C2CA;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.content .switchBtn2
{
  margin-top: 40px;
  width: 830px;
  height: 50px;
  font-size: 30px;
  font-family: segoe ui light;

  padding-bottom: -15px;
}
.content .switchBtn2:hover
{
  margin-top: 40px;
  width: 800px;
  height: 50px;
  font-size: 30px;
  font-family: segoe ui light;
  background-color: #C2C2CA;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}
.content .cust_btn
{
margin-top: 40px;
  width: 1000px;
  height: 130px;
  font-size: 40px;
  font-family: segoe ui light;
}
.content .cust_btn:hover
{
  margin-top: 40px;
  width: 1000px;
  height: 130px;
  font-size: 40px;
  font-family: segoe ui light;
  background-color: #C2C2CA;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.button_switch
{
  height: 110px;
  width: 1000px;
}
.del_student {
  display:none;
}
.results2 .add_student h1
{
  margin-bottom: -20px;
}
.results2 .del_student h1
{
  margin-bottom: -20px;
}

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Solution

NVM wont be needed I see the problem..

 

with JQuery you will need to put your script  

<script type="text/javascript">
    $('#btnClick').on('click',function(){
          if($('.add_student').css('display')!='none'){
          	$('.del_student').show();
            $('.add_student').hide();
          }else if($('.del_student').css('display')!='none'){
              $('.add_student').show();
              $('.del_student').hide();
          }
      });
    </script>

at the bottom of the page... just before the </body> tag

  

<html>
  <head>
    <meta charset="utf-8">
    <title>  add/delete  </title>
    <!-- css file for the page linked below. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="checkpoint.css">


  </head>
  <body>
  <div class="container">
    <div class="header">
      <!-- navigation to load the other pages below -->
      <a href="marking.html" class="nc">Marking</a>
      <a href="#" class="currentpage">Staff</a>
      <a href="students.html" class = "nc">Students</a>
      <a href="" class="nclogin"> Log In</a>

    </div> <!-- header div ends here -->
    <div class="content">
      <div class="card"> 
        <h1>Add/Delete Student</h1>
      </div>

<button id="btnClick" class="switchBtn">Toggle</button>
      <div class="results2">
        <div class="add_student">

          <form action="/action_page.php">
              <h1>Add Student</h1>
              <label>Student ID : </label> <input type="text" name="studentnum" required><br>
              <label>First name : </label><input type="text" name="firstname" required><br>
              <label>Last name : </label> <input type="text" name="lastname" required><br>
              <input type="submit" class="switchBtn2" value="Submit">
          </form>
        </div>

        <div class="del_student">
          <h1>Delete Student</h1>
          <!-- inputs to search will go here -->
        </div>
      </div>
     <!-- add a selector to choose whether you delete or add. -->
    </div> <!--content div ends here -->

    <div class="footer">
    </div> <!-- footer ends here -->
  </div>  <!-- container div ends here -->
  
    <!-- script to switch the content shown from add to delete -->
  <script type="text/javascript">
    $('#btnClick').on('click',function(){
          if($('.add_student').css('display')!='none'){
          	$('.del_student').show();
            $('.add_student').hide();
          }else if($('.del_student').css('display')!='none'){
              $('.add_student').show();
              $('.del_student').hide();
          }
      });
    </script>
  </body>
</html>

cheers ;)

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
1 minute ago, FJLJ said:

 

cheers ;)

 

Ah I knew it would be a basic mistake I made!  Thanks so much for the help, you're a life saver!

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×