{"id":141,"date":"2020-06-03T07:19:05","date_gmt":"2020-06-03T04:19:05","guid":{"rendered":"http:\/\/bahadirmeric.net\/bahadir\/?p=141"},"modified":"2020-06-03T07:19:05","modified_gmt":"2020-06-03T04:19:05","slug":"jquery-ile-accordion-panel-yapimi","status":"publish","type":"post","link":"http:\/\/bahadirmeric.net\/bahadir\/2020\/06\/03\/jquery-ile-accordion-panel-yapimi\/","title":{"rendered":"JQuery ile Accordion Panel yap\u0131m\u0131"},"content":{"rendered":"\n<p>Mevcut bir projemde basit ama\u00e7l\u0131 bir Accordion panele ihtiya\u00e7 duydum. En az kodu yazarak bu i\u015fi nas\u0131l halledebilirim derken ve \u00f6zellikte projemde olan \u00f6\u011feler ile uyumlu olsun diye d\u00fc\u015f\u00fcn\u00fcrken bir ka\u00e7 k\u00fc\u00e7\u00fck ara\u015ft\u0131rmadan sonra en k\u0131sa ve en kullan\u0131\u015fl\u0131 olarak bu y\u00f6ntemi buldum.<\/p>\n\n\n\n<p>Y\u00f6ntem asl\u0131nda \u00e7ok basit \u00f6ncelikle a\u015fa\u011f\u0131daki gibi html kodundan olu\u015fuyor;<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;div class=&quot;demo-show2&quot;&gt;\n  &lt;h3&gt;Deneme 1&lt;\/h3&gt;\n  &lt;div&gt;Deneme 1 'in i\u00e7eri\u011fi&lt;\/div&gt;\n  &lt;h3&gt;Deneme 2&lt;\/h3&gt;\n  &lt;div&gt;Deneme 2 'in i\u00e7eri\u011fi&lt;\/div&gt;\n  &lt;h3&gt;Deneme 3&lt;\/h3&gt;\n  &lt;div&gt;Deneme 3 'in i\u00e7eri\u011fi&lt;\/div&gt;\n&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<p>Bu a\u015famadan sonrada JQuery kodu olarak \u015f\u00f6yle bir kod geliyor;<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n&lt;script  type=&quot;text\/javascript&quot;&gt;\n$(document).ready(function() {\n  $('div.demo-show2&gt; div').hide();  \n  $('div.demo-show2&gt; h3').click(function() {\n    var $nextDiv = $(this).next();\n    var $visibleSiblings = $nextDiv.siblings('div:visible');\n  \n    if ($visibleSiblings.length ) {\n      $visibleSiblings.slideUp('fast', function() {\n        $nextDiv.slideToggle('fast');\n      });\n    } else {\n       $nextDiv.slideToggle('fast');\n    }\n  });\n});\n&lt;\/script&gt;\n<\/pre><\/div>\n\n\n<p>En son olarakta bir stil olu\u015fturuyoruz;<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n&lt;style&gt;\n.demo-show2 {\n  width: 97%;\n  margin: 1em .5em;\n  background-color: #bfcd93;\n}\n.demo-show2 h3 {\n  margin: 0;\n  width: 100%;\n  padding-top: 4px;\n  padding-bottom: 4px;  \n  border-top: 1px solid #386785;\n  border-bottom: 1px solid #386785;\n  border-left: 1px solid #386785;\n  border-right: 1px solid #386785;\n  cursor: pointer;\n}\n.demo-show2 div {\n   background-color: #f0f0f0;\n   width: 100%;\n   border-bottom: 1px solid #386785;\n   border-left: 1px solid #386785;\n   border-right: 1px solid #386785; \n}\n&lt;\/style&gt;\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"<p>Mevcut bir projemde basit ama\u00e7l\u0131 bir Accordion panele ihtiya\u00e7 duydum. En az kodu yazarak bu i\u015fi nas\u0131l halledebilirim derken ve \u00f6zellikte projemde olan \u00f6\u011feler ile uyumlu olsun diye d\u00fc\u015f\u00fcn\u00fcrken bir ka\u00e7 k\u00fc\u00e7\u00fck ara\u015ft\u0131rmadan sonra en k\u0131sa ve en kullan\u0131\u015fl\u0131 olarak bu y\u00f6ntemi buldum. Y\u00f6ntem asl\u0131nda \u00e7ok basit \u00f6ncelikle a\u015fa\u011f\u0131daki gibi&#8230; <a class=\"continue-reading-link\" href=\"http:\/\/bahadirmeric.net\/bahadir\/2020\/06\/03\/jquery-ile-accordion-panel-yapimi\/\"> Continue reading <span class=\"meta-nav\">&rarr; <\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":13,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[7,4,15,6],"class_list":["post-141","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-asp-net","tag-c","tag-jquery","tag-visual-studio"],"_links":{"self":[{"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/posts\/141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/comments?post=141"}],"version-history":[{"count":1,"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/posts\/141\/revisions"}],"predecessor-version":[{"id":142,"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/posts\/141\/revisions\/142"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/media\/13"}],"wp:attachment":[{"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/media?parent=141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/categories?post=141"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/tags?post=141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}