$(document).ready(function(){
$(".open").click(function(){
$(".show_text").show('blind');
$(".open").hide();
$(".close").show();
});
$(".close").click(function(){
$(".open").show();
$(".show_text").hide('blind');
$(".close").hide();
});
});
$(document).ready(function(){
$(".open2").click(function(){
$(".show_text2").show('blind');
$(".open2").hide();
$(".close2").show();
});
$(".close2").click(function(){
$(".open2").show();
$(".show_text2").hide('blind');
$(".close2").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open" style="cursor:pointer">Open 1
</div><!-- open -->
<div class="close" style="cursor:pointer; display:none;">Close 1
</div><!-- close -->
<div class="show_text" style="display:none;">
hello world 1
</div><!-- show_text -->
<div class="open2" style="cursor:pointer">Open 2
</div><!-- open -->
<div class="close2" style="cursor:pointer; display:none;">Close 2
</div><!-- close -->
<div class="show_text2" style="display:none;">
hello world 2
</div><!-- show_text -->
Satpal :
Wrap you content in a container div, then you can use\n\n\n.closest() \n\n\n\n For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.\n\n\n\n.find()\n\n\n\n Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.\n\n\nHTML\n\n<div class=\"container\">\n <div class=\"open\" style=\"cursor:pointer\">Open 1\n </div>\n <!-- open -->\n <div class=\"close\" style=\"cursor:pointer; display:none;\">Close 1\n </div>\n <!-- close -->\n <div class=\"show_text\" style=\"display:none;\">\n hello world 1\n </div>\n</div>\n\n\nCode\n\n$(\".open\").click(function() {\n //Traverse up to container div\n var container = $(this).closest('.container'); \n\n //Use .find() to find child\n});\n\n\nHere is an example:\n\n\r\n\r\n$(document).ready(function() {\r\n $(\".open\").click(function() {\r\n var continer = $(this).closest('.container');\r\n continer.find(\".show_text\").show('blind');\r\n continer.find(\".open\").hide();\r\n continer.find(\".close\").show();\r\n });\r\n $(\".close\").click(function() {\r\n var continer = $(this).closest('.container');\r\n continer.find(\".open\").show();\r\n continer.find(\".show_text\").hide('blind');\r\n continer.find(\".close\").hide();\r\n });\r\n});\r\n<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>\r\n\r\n<div class=\"container\">\r\n <div class=\"open\" style=\"cursor:pointer\">Open 1\r\n </div>\r\n <!-- open -->\r\n <div class=\"close\" style=\"cursor:pointer; display:none;\">Close 1\r\n </div>\r\n <!-- close -->\r\n <div class=\"show_text\" style=\"display:none;\">\r\n hello world 1\r\n </div>\r\n</div>\r\n<!-- show_text -->\r\n<div class=\"container\">\r\n <div class=\"open\" style=\"cursor:pointer\">Open 2\r\n </div>\r\n <!-- open -->\r\n <div class=\"close\" style=\"cursor:pointer; display:none;\">Close 2\r\n </div>\r\n <!-- close -->\r\n <div class=\"show_text\" style=\"display:none;\">\r\n hello world 2\r\n </div>\r\n</div>\r\n<!-- show_text -->",
2015-04-03T11:04:48
Sadikhasan :
\r\n\r\n$(document).ready(function(){\r\n $(\"div[class^=open]\").click(function(){\r\n $(\"div[class^=show_text]\").show('blind');\r\n\t\t$(\"div[class^=open]\").hide();\r\n\t\t$(\"div[class^=close]\").show();\r\n });\r\n $(\"div[class^=close]\").click(function(){\r\n $(\"div[class^=open]\").show();\r\n\t\t$(\"div[class^=show_text]\").hide('blind');\r\n\t\t$(\"div[class^=close]\").hide();\r\n });\r\n});\t\t\r\n<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>\r\n<div class=\"open\" style=\"cursor:pointer\">Open 1\r\n</div><!-- open -->\r\n<div class=\"close\" style=\"cursor:pointer; display:none;\">Close 1\r\n</div><!-- close -->\r\n<div class=\"show_text\" style=\"display:none;\">\r\nhello world 1\r\n</div><!-- show_text -->\r\n\r\n<div class=\"open2\" style=\"cursor:pointer\">Open 2\r\n</div><!-- open -->\r\n<div class=\"close2\" style=\"cursor:pointer; display:none;\">Close 2\r\n</div><!-- close -->\r\n<div class=\"show_text2\" style=\"display:none;\">\r\nhello world 2\r\n</div><!-- show_text -->",
2015-04-03T11:05:30