html - Creating a drop down menu with Jquery (Show / Hide item) -
trying have section of text appear when click something. trying jquery, having issues. new jquery appreciated. in advance.
html code: (i want 'vvvvvvvvvvvv' item click show else)
<div class="row" align="center"> <div class="col-sm-4" align="center"> <span> <h6 class="payment-item-title">visa ending in 5555</h6> </span> </div> <div class="col-sm-4" align="center"> <span> <h6 class="payment-item-title">12/2017</h6> </span> </div> <div class="col-sm-4" align="center"> <span id="v-btn"> <h6> <b>vvvvvvvvvvvv</b> </h6> </span> </div> </div>
html code ( want appear click):
<div align="center" id="content-content" class="sub-nav" style="background-color: #939393"> <div class="row" align="center"> <div class="col-sm-4" align="right"> <span> <h6 class="payment-section-header-title">name on card</h6> </span> </div> <div class="col-sm-4" align="right"> <span> <h6 class="payment-section-header-title">billing address</h6> </span> </div> </div> <div class="row" align="center"> <div class="col-sm-6" align="center"> <span> <h6 class="payment-item-title">jonny smith</h6> </span> </div> <div class="col-sm-6" align="left"> <span> <h6 class="payment-item-title"> jonny smith <br /> 123 fake street <br /> township, nj <br /> 201-555-5554 </h6> </span> </div> <div class="col-sm-5" align="center"> <h6> <button type="button" align="center">edit</button> </h6> </div> <div class="col-sm-1" align="center"> <h6> <button type="button" align="center">delete</button> </h6> </div> </div> </div>
jquery code:
<script> $(document).ready(function() { $('#v-btn').click(function() { alert("im here"); $('.sub-nav').toggleclass('visible'); }); }); </script>
set @ top:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
here css process:
#content-content.sub-nav{ display: none; } #content-content.visible { display: block; }
$('#v-btn').click(function() { var $elem = $(this).find('h6 > b'); $elem.text(); // vvvvvv alert("im here"); $('.sub-nav').toggleclass('visible'); });
Comments
Post a Comment