He hecho una funcionalidad para poder ocultar un menú por medio de jquery.
La primera parte del código, es decir la de ocultar, funciona perfectamente, pero la segunda parte, aunque funciona, carga la pagina, cuando mi intención es que lo haga sin cargarla pagina.
¿Como podría mejorar el código para que no cargase la página?
JQUERY
<script type="text/javascript" >
$(document).ready(function(){
$('#ocultaropciones').click(function(e){
var urlaocultar = '<a href="" class="btn btn-info" id="mostraropciones" >Mostrar opciones</a>';
$('#contenidoDerecha').attr('class','col-md-12');
$('#menuizquierdo').hide();
$('#opcionesListado').html(urlaocultar);
e.preventDefault();
// $('#ocultaropciones').parents().text(urlaocultar);
});
$('#mostraropciones').click(function(b){
b.preventDefault();
var urlamostrar = '<a href="" class="btn btn-info" id="ocultaropciones" >Ocultar opciones</a>';
$('#menuizquierdo').show();
$('#opcionesListado').html(urlamostrar);
});
})
</script>
El código HTML
es demasiado extenso así que pongo lo que creo que os puede ayudar a identificar el problema
<div class="col-md-12">
<div class="panel panel-default ">
<!-- <div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div> -->
<div class="panel-body">
<div class="row">
<div class="col-md-2" id="menuizquierdo">
<div class="panel panel-default">
<div class="panel-heading">Opciones</div>
<div class="panel-body text-center">
<ul>
<li><a href="">opcion_1</a></li>
<li><a href="">opcion_2</a></li>
<li><a href="">opcion_3</a></li>
<li><a href="">opcion_4</a></li>
<li><a href="">opcion_5</a></li>
<li><a href="">opcion_6</a></li>
<li><a href="">opcion_7</a></li>
<li><a href="">opcion_8</a></li>
<li><a href="">opcion_9</a></li>
<li><a href="">opcion_10</a></li>
<li><a href="">opcion_11</a></li>
<li><a href="">opcion_12</a></li>
<li><a href="">opcion_13</a></li>
<li><a href="">opcion_14</a></li>
<li><a href="">opcion_15</a></li>
<li><a href="">opcion_16</a></li>
<li><a href="">opcion_17</a></li>
<li><a href="">opcion_18</a></li>
<li><a href="">opcion_19</a></li>
<li><a href="">opcion_20</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-10" id="contenidoDerecha">
<div id="espacio100"></div>
<div class="col-md-2" id="opcionesListado">
<a href="" class="btn btn-info" id="ocultaropciones" >Ocultar opciones</a>
</div>