How to hide several divs and display them after selecting it

Question

How to hide several divs and display them after selecting it

Navigation

#1 by (3 votes)
#2 by (1 votes)

0

I have the following code, it is divided into two columns on the left side are the links of records and on the right side the respective form to each record.

My question is as follows, how can you hide all the forms and show one when you click on the respective record?

<div class="container">
            <div class="row">

                <div class="col-md-6">
                    <div id="tabs">
                        <ul class="nav nav-pills">
                        <li role="presentation"><a href="#tabs-1">Registro1</a></li>
                        <li role="presentation"><a href="#tabs-2">Registro2</a></li>
                        <li role="presentation"><a href="#tabs-3">Registro3</a></li>
                    </div><! --/tabs -->
                </div><! --/col-md-6 -->

                <div class="col-md-2">
                    <div id="tabs-1">
                        <h4>Registro1</h4>
                         <form id="t1" action="forma.php" method="post">
                            Red: <input type="text" id="red" name="red">
                            Codigo: <input type="text" id="codigo" name="codigo">
                            <input class="btn btn-theme" type="submit" value="Registrar" name="registro1FormSubmitted" >
                         </form>
                    </div><! --/tabs1 -->

                    <div id="tabs-2">
                        <h4>Registro2</h4>
                         <form id="t2" action="forma.php" method="post">
                            Nombre: <input type="text" id="nombre" name="nombre">
                            Color: <input type="text" id="color" name="color">
                            <input class="btn btn-theme" type="submit" value="Registrar" name="registro2FormSubmitted" >
                         </form>
                    </div><! --/tabs2 -->


                    <div id="tabs-3">
                        <h4>Registro3</h4>
                         <form id="t3" action="forma.php" method="post">
                            Onda: <input type="text" id="onda" name="onda">
                            Tipo: <input type="text" id="tipo" name="tipo">
                            <input class="btn btn-theme" type="submit" value="Registrar" name="registro3FormSubmitted" >
                         </form>
                    </div><! --/tabs3 -->
                </div><! --/col-md-2 -->

            </div><! --/row -->
</div><! --/container -->

javascript html bootstrap

asked by Houdini 01.09.2016 в 20:21

source

2 answers

3

Considering that you are using Bootstrap, we are taking advantage of the features that it brings:

<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href=".registro1" role="tab" data-toggle="tab">Registro 1</a></li>
  <li><a href=".registro2" role="tab" data-toggle="tab">Registro 2</a></li>
  <li><a href=".registro3" role="tab" data-toggle="tab">Registro 3</a></li>
  
  </ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active registro1">
       <h4>Registro1</h4>
                         <form id="t1" action="forma.php" method="post">
                            Red: <input type="text" id="red" name="red">
                            Codigo: <input type="text" id="codigo" name="codigo">
                            <input class="btn btn-theme" type="submit" value="Registrar" name="registro1FormSubmitted" >
                         </form>
    
  </div>
  <div class="tab-pane registro2"> <h4>Registro2</h4>
                         <form id="t2" action="forma.php" method="post">
                            Nombre: <input type="text" id="nombre" name="nombre">
                            Color: <input type="text" id="color" name="color">
                            <input class="btn btn-theme" type="submit" value="Registrar" name="registro2FormSubmitted" >
                         </form></div>
  <div class="tab-pane registro3"> <h4>Registro3</h4>
                         <form id="t3" action="forma.php" method="post">
                            Onda: <input type="text" id="onda" name="onda">
                            Tipo: <input type="text" id="tipo" name="tipo">
                            <input class="btn btn-theme" type="submit" value="Registrar" name="registro3FormSubmitted" >
                         </form></div>
  
</div>

and here with a little customization

/* custom inclusion of right, left and below tabs */

.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
  border-bottom: 0;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none;
}

.tab-content > .active,
.pill-content > .active {
  display: block;
}


.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
  float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
}

.tabs-left > .nav-tabs {
  float: left;
  margin-right: 19px;
  border-right: 1px solid #ddd;
}

.tabs-left > .nav-tabs > li > a {
  margin-right: -1px;
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
  border-color: #ddd transparent #ddd #ddd;

}

 <script src="//code.jquery.com/jquery.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <div class="container">
      <div class="row">
        <div class="col-md-6"><h3>Tabs verticales</h3>
              	
          <!-- tabs left -->
          <div class="tabbable tabs-left">
            <ul class="nav nav-tabs">
        <li class="active"><a href=".registro1" role="tab" data-toggle="tab">Registro 1</a></li>
      <li><a href=".registro2" role="tab" data-toggle="tab">Registro 2</a></li>
      <li><a href=".registro3" role="tab" data-toggle="tab">Registro 3</a></li>
            </ul>
            <div class="tab-content">
             <div class="tab-pane active registro1">
           <h4>Registro1</h4>
                             <form id="t1" action="forma.php" method="post">
                                Red: <input type="text" id="red" name="red">
                                Codigo: <input type="text" id="codigo" name="codigo">
                                <input class="btn btn-theme" type="submit" value="Registrar" name="registro1FormSubmitted" >
                             </form>
        
      </div>
      <div class="tab-pane registro2"> <h4>Registro2</h4>
                             <form id="t2" action="forma.php" method="post">
                                Nombre: <input type="text" id="nombre" name="nombre">
                                Color: <input type="text" id="color" name="color">
                                <input class="btn btn-theme" type="submit" value="Registrar" name="registro2FormSubmitted" >
                             </form></div>
      <div class="tab-pane registro3"> <h4>Registro3</h4>
                             <form id="t3" action="forma.php" method="post">
                                Onda: <input type="text" id="onda" name="onda">
                                Tipo: <input type="text" id="tipo" name="tipo">
                                <input class="btn btn-theme" type="submit" value="Registrar" name="registro3FormSubmitted" >
                             </form></div>
       
            </div>
          </div>
          <!-- /tabs -->
          
        </div>   
      </div><!-- /row -->
    </div>

answered by 01.09.2016 в 20:55

Compare images What is the difference between using list or not in python?

score 1 · Accepted Answer

In order to do what you want in a more simplified way you could use jQuery and the functions show and hide

Which do what their name says. While show shows the elements to which it is called, hide does the opposite.

First we have to think that when we just load the page we do not want the records to be shown, since they will be shown when we click on a link, that is why we will hide all the ID # tabs-x.

Afterwards, we will add to our links an ID with its respective unique name (As it has to be), and we send them to call each time the user clicks on them.

If we click on # link-1, we will have to hide # tabs-2 and # tabs-3 and show # tabs-1, if we click on # link-2, we would have to hide # tabs-1 and # tabs-3 and show # tabs-2, and if we click on # link-3 ... Well, you know what to do;)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Función JavaScript</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

	<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 
<script type="text/javascript">
	$(document).ready(function(){
		$('#tabs-1').hide();
		$('#tabs-2').hide();
		$('#tabs-3').hide();

		$('#enlace1').click(function(){
			$('#tabs-1').show();
			$('#tabs-2').hide();
			$('#tabs-3').hide();
		});

		$('#enlace2').click(function(){
			$('#tabs-2').show();
			$('#tabs-1').hide();
			$('#tabs-3').hide();
		});

		$('#enlace3').click(function(){
			$('#tabs-3').show();
			$('#tabs-2').hide();
			$('#tabs-1').hide();
		});
	});
</script>
<body>
	<div class="container">
     			<div class="row">
    				<div class="col-md-6">
    					<div id="tabs">
    						<ul class="nav nav-pills">
    						<li role="presentation"><a href="#tabs-1" id="enlace1">Registro1</a></li>
    						<li role="presentation"><a href="#tabs-2" id="enlace2">Registro2</a></li>
    						<li role="presentation"><a href="#tabs-3" id="enlace3">Registro3</a></li>
    					</div>
    				</div>
    				
    				<div class="col-md-2">
    					<div id="tabs-1">
    						<h4>Registro1</h4>
    						 <form id="t1" action="forma.php" method="post">
    							Red: <input type="text" id="red" name="red">
    							Codigo: <input type="text" id="codigo" name="codigo">
    							<input class="btn btn-theme" type="submit" value="Registrar" name="registro1FormSubmitted" >
    						 </form>
    					</div>
    
    					<div id="tabs-2">
    						<h4>Registro2</h4>
    						 <form id="t2" action="forma.php" method="post">
    							Nombre: <input type="text" id="nombre" name="nombre">
    							Color: <input type="text" id="color" name="color">
    							<input class="btn btn-theme" type="submit" value="Registrar" name="registro2FormSubmitted" >
    						 </form>
    					</div>
    
    
    					<div id="tabs-3">
    						<h4>Registro3</h4>
    						 <form id="t3" action="forma.php" method="post">
    							Onda: <input type="text" id="onda" name="onda">
    							Tipo: <input type="text" id="tipo" name="tipo">
    							<input class="btn btn-theme" type="submit" value="Registrar" name="registro3FormSubmitted" >
    						 </form>
    					</div>
    				</div>
    
    			</div>
    </div>
</body>
</html>

If you have any questions yet, do not hesitate to leave me a comment to help you! Greetings and success:)