show/hide div with button changing text

0
votes

I have an issue that I don't know how to solve with jQuery since I am still very noob.

I have 4 boxes (or more) and each box will have a button "View Details", what I need is that when you click on View Details display a hidden div with the correspondent information of the box but also need that when you the hidden div is displayed, the button change to "Hide Details"-- I can dot it with toggle but the catch is that if you click the button View Details of another box the div doesn't hide and the button with "hide details" won't get back to its default status, hope somebody understand this and help me.

<div id="product_id" class="model_box box">
     <h3>title</h3>

    <img src="img/products/product_example.png" alt="" width="200px" height="100px">
    <button id="product_id" href="#model_details_id" class="lightblue nav-toggle view_details">VIEW DETAILS</button>
</div>
<div id="product_id" class="model_box box">
     <h3>title</h3>

    <img src="img/products/product_example.png" alt="" width="200px" height="100px">
    <button id="product_id" href="#model_details_id" class="lightblue nav-toggle view_details">VIEW DETAILS</button>
</div>

Here's my jfiddle http://jsfiddle.net/Dx9Wc/

2
jquerytoggleshow-hide
i hope you know that id needs to be unique in the page and this is a placeholder, right? - Nick Andriopoulos

2 Answers

0
votes

try this fiddle http://jsfiddle.net/RdSeS/

$(".view_details").click(function () {
$(".details").hide();
$(this).parents('.box').find('.details').html($("#model_details").html()).show();

});
0
votes

I think you're looking for something like this:

$(document).ready(function() {
    $('#product_id_1').on('click', function(){
        $('#model_details').css('display', 'block');
    });
});

http://jsfiddle.net/Dx9Wc/3/