he hecho una funcionalidad para poder ocultar un menu por medio de jquery.
La primera parte del codigo, es decir la de ocultar, funciona perfectamente, pero la segunda parte, aunque funciona, carga la pagina, cuando mi intencion es que lo haga sin cargarla pagina.
¿Como podria mejorar el codigo para que no cargase la pagina?
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 codigo html es demasiado extenso asi 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>