{"id":5837,"date":"2024-12-06T17:28:00","date_gmt":"2024-12-06T14:28:00","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=5837"},"modified":"2024-12-06T17:32:03","modified_gmt":"2024-12-06T14:32:03","slug":"react-ile-accordion-acilir-kapanir-icerik-olusturma-ornek-uygulama","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-ile-accordion-acilir-kapanir-icerik-olusturma-ornek-uygulama\/","title":{"rendered":"React ile Accordion: A\u00e7\u0131l\u0131r\/Kapan\u0131r \u0130\u00e7erik Olu\u015fturma – \u00d6rnek Uygulama"},"content":{"rendered":"

Bu yaz\u0131da, sizlerle React ile akordion (accordion) bile\u015feni olu\u015fturmay\u0131 \u00f6\u011fretece\u011fiz. Ge\u00e7ti\u011fimiz g\u00fcnlerde bir proje i\u00e7in ihtiyac\u0131m oldu, belki 8\/10 farkl\u0131 k\u00fct\u00fcphane denedim ancak hi\u00e7biri istedi\u011fim sonucu vermedi, ben de react \u0131n kendi s\u0131n\u0131f\u0131n\u0131 kullanmaya karar verdim.<\/p>\n

Akordion, birbiri \u00fczerine katlanm\u0131\u015f b\u00f6l\u00fcmlerden olu\u015fan bir kullan\u0131c\u0131 aray\u00fcz\u00fc \u00f6\u011fesidir. Her bir b\u00f6l\u00fcm, bir ba\u015fl\u0131k ve ilgili i\u00e7eri\u011fe sahiptir. Kullan\u0131c\u0131 ba\u015fl\u0131\u011fa t\u0131klad\u0131\u011f\u0131nda, ilgili i\u00e7erik a\u00e7\u0131l\u0131r veya kapan\u0131r.<\/p>\n

Bu makalede, \u00f6rnek bir uygulama ile birlikte React’te nas\u0131l akordion bile\u015feni olu\u015fturaca\u011f\u0131n\u0131z\u0131 \u00f6\u011freneceksiniz.<\/p>\n

Akordion Nedir?<\/h3>\n

Akordion, web sitelerinde ve uygulamalarda s\u0131kl\u0131kla kullan\u0131lan bir kullan\u0131c\u0131 aray\u00fcz\u00fc \u00f6\u011fesidir. Kullan\u0131c\u0131 aray\u00fcz\u00fcnde yer tasarrufu sa\u011flar ve kullan\u0131c\u0131lar\u0131n yaln\u0131zca ilgilendikleri bilgileri okumas\u0131na olanak tan\u0131r. \u00d6rne\u011fin, bir SSS (S\u0131k\u00e7a Sorulan Sorular) b\u00f6l\u00fcm\u00fc akordion kullan\u0131larak olu\u015fturulabilir.<\/p>\n

React ile Akordion Olu\u015fturma<\/h3>\n

React’te akordion olu\u015fturmak i\u00e7in a\u015fa\u011f\u0131daki ad\u0131mlar\u0131 takip edebilirsiniz:<\/p>\n

    \n
  1. CSS Tan\u0131mlama:<\/strong> \u0130lk olarak, akordionumuzun stilini tan\u0131mlayal\u0131m. Bu kod blo\u011funda, renk de\u011fi\u015fkenleri ve akordionun farkl\u0131 b\u00f6l\u00fcmleri i\u00e7in stilleri tan\u0131mlad\u0131k.<\/li>\n<\/ol>\n
    \n
    \n

    CSS<\/span><\/p>\n

    \n
    $blue: #2196F3;\r\n$grey: #E0E0E0;\r\n$white: #FFFFFF;\r\n\r\nbody {\r\n  font-family: 'Roboto', sans-serif;\r\n  background: $grey;\r\n  padding: 24px;\r\n}\r\n\r\n.accordion {\r\n  max-width: 800px;\r\n  margin: 0 auto;\r\n}\r\n\r\n.accordionHeader {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 8px 16px;\r\n  background: $blue;\r\n  color: $white;\r\n  border-bottom: 1px solid darken($blue, 6%);\r\n  transition: 0.14s;\r\n  \r\n  &:hover {\r\n    background: lighten($blue, 6%);\r\n    cursor: pointer;\r\n  }\r\n  \r\n  svg {\r\n    width: 24px;\r\n    height: 24px;\r\n    fill: $grey;\r\n  }\r\n}\r\n\r\n.accordionContent {\r\n  padding: 16px;\r\n  background: $white;\r\n}<\/pre>\n
     <\/p>\n<\/div>\n<\/div>\n<\/div>\n
      \n
    1. React Bile\u015feni Olu\u015fturma:<\/strong>
      \n\u015eimdi, akordion bile\u015fenimizi olu\u015fturaca\u011f\u0131z. Accordion<\/code> isminde bir React s\u0131n\u0131f bile\u015feni tan\u0131mlayarak ba\u015flayal\u0131m. Bu bile\u015fen, ba\u015fl\u0131k ve i\u00e7erik olmak \u00fczere iki prop (\u00f6zellik) alacakt\u0131r.<\/li>\n<\/ol>\n
      \n
      \n
      JavaScript<\/span><\/p>\n
      class Accordion extends React.Component {\r\n    constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      display: 'none',\r\n      transform: ''\r\n    };\r\n    \r\n    this.toggle = this.toggle.bind(this);\r\n  }\r\n  \r\n  toggle() {\r\n    const newDisplay = this.state.display == 'block' ? 'none' : 'block';\r\n    const newTransform = this.state.transform == 'rotate(180deg)' ? '' : 'rotate(180deg)';\r\n    this.setState({\r\n      display: newDisplay,\r\n      transform: newTransform\r\n    });\r\n  }\r\n  \r\n  render() {\r\n    return(\r\n      <div className=\"accordion\">\r\n        <div className=\"accordionHeader\" onClick={this.toggle}>\r\n          <p>{this.props.accordionTitle}<\/p>\r\n          <svg style={{ transform: this.state.transform }} viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n            <path d=\"M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z\"\/>\r\n            <path d=\"M0-.75h24v24H0z\" fill=\"none\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <div className=\"accordionContent\" style={{ display: this.state.display }}>\r\n          <p>{this.props.accordionContent}<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    );\r\n  }\r\n}\r\n\r\nfunction App() {\r\n  return (\r\n    <div>\r\n      <Accordion\r\n         accordionTitle=\"One\"\r\n         accordionContent=\"Lorem ipsum...\"\r\n       \/>\r\n      <Accordion\r\n         accordionTitle=\"Two\"\r\n         accordionContent=\"Lorem ipsum...\"\r\n       \/>\r\n      <Accordion\r\n         accordionTitle=\"Three\"\r\n         accordionContent=\"Lorem ipsum...\"\r\n       \/>\r\n    <\/div>\r\n   );\r\n}\r\n\r\nReactDOM.render(\r\n  <App \/>,\r\n  document.getElementById('root')\r\n);<\/pre>\n
       <\/p>\n<\/div>\n<\/div>\n
      B\u00f6l\u00fcm 3: Kodun \u00c7al\u0131\u015fmas\u0131<\/strong><\/p>\n
      Yukar\u0131daki kod par\u00e7as\u0131nda yapt\u0131klar\u0131m\u0131z\u0131 daha detayl\u0131 inceleyelim:<\/p>\n
        \n
      • constructor:<\/strong> Bile\u015fen ilk olu\u015fturuldu\u011funda \u00e7al\u0131\u015f\u0131r. Burada state’i ba\u015flat\u0131yoruz. display: 'none'<\/code> ile i\u00e7erik ba\u015flang\u0131\u00e7ta gizli olacak \u015fekilde ayarl\u0131yoruz. transform: ''<\/code> ise a\u00e7ma\/kapama animasyonu i\u00e7in kullan\u0131lan bir SVG ikonu \u00fczerindeki d\u00f6n\u00fc\u015f\u00fcm \u00f6zelli\u011fini kontrol ediyor.<\/li>\n
      • toggle:<\/strong> Bu metod, akordionun a\u00e7\u0131l\u0131p kapanmas\u0131n\u0131 sa\u011flar. T\u0131klama olay\u0131 ger\u00e7ekle\u015fti\u011finde \u00e7a\u011fr\u0131l\u0131r ve state’i g\u00fcncelleyerek display<\/code> ve transform<\/code> de\u011ferlerini de\u011fi\u015ftirir. Bu sayede i\u00e7erik g\u00f6sterilir veya gizlenir ve SVG ikonu d\u00f6ner.<\/li>\n
      • render:<\/strong> Bile\u015fenin kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc olu\u015fturan metottur. Burada HTML yap\u0131s\u0131n\u0131 olu\u015fturuyoruz. accordionHeader<\/code> s\u0131n\u0131f\u0131na sahip div, ba\u015fl\u0131k ve a\u00e7ma\/kapama ikonunu i\u00e7erir. onClick<\/code> olay\u0131 ile toggle<\/code> metodu \u00e7a\u011fr\u0131l\u0131r. accordionContent<\/code> s\u0131n\u0131f\u0131na sahip div ise i\u00e7eri\u011fi tutar ve display<\/code> state’i ile kontrol edilir.<\/li>\n<\/ul>\n
        B\u00f6l\u00fcm 4: Uygulaman\u0131n Tamamlanmas\u0131<\/strong><\/p>\n
        \u015eimdi App.js<\/code> dosyam\u0131zda Accordion<\/code> bile\u015fenini kullanarak birka\u00e7 \u00f6rnek akordion olu\u015ftural\u0131m:<\/p>\n
        \n
        \n
        JavaScript<\/span><\/p>\n
        function App() {\r\n  return (\r\n    <div>\r\n      <Accordion\r\n        accordionTitle=\"One\"\r\n        accordionContent=\"Lorem ipsum...\"\r\n      \/>\r\n      <Accordion\r\n        accordionTitle=\"Two\"\r\n        accordionContent=\"Lorem ipsum...\"\r\n      \/>\r\n      <Accordion\r\n        accordionTitle=\"Three\"\r\n        accordionContent=\"Lorem ipsum...\"\r\n      \/>\r\n    <\/div>\r\n  );\r\n}<\/pre>\n
         <\/p>\n<\/div>\n<\/div>\n
        Burada Accordion<\/code> bile\u015fenini \u00fc\u00e7 kez kullanarak farkl\u0131 ba\u015fl\u0131k ve i\u00e7eriklere sahip akordionlar olu\u015fturduk.<\/p>\n
        B\u00f6l\u00fcm 5: Ek \u00d6zellikler ve Geli\u015ftirmeler<\/strong><\/p>\n
          \n
        • \u00c7oklu Akordion:<\/strong> E\u011fer birden fazla akordionun ayn\u0131 anda a\u00e7\u0131k kalmas\u0131n\u0131 istemiyorsan\u0131z, t\u00fcm akordionlar\u0131n state’ini y\u00f6netecek bir \u00fcst bile\u015fen olu\u015fturabilirsiniz.<\/li>\n
        • Animasyonlar:<\/strong> CSS veya JavaScript animasyon k\u00fct\u00fcphaneleri kullanarak daha ak\u0131c\u0131 animasyonlar ekleyebilirsiniz.<\/li>\n
        • Eri\u015filebilirlik:<\/strong> Klavye ile kullan\u0131m ve ekran okuyucu uyumlulu\u011fu i\u00e7in gerekli \u00f6zellikleri ekleyebilirsiniz.<\/li>\n
        • Custom Hook:<\/strong> Akordion mant\u0131\u011f\u0131n\u0131 tekrar tekrar kullanmak yerine, bir custom hook olu\u015fturarak kod tekrar\u0131n\u0131 azaltabilirsiniz.<\/li>\n<\/ul>\n
          Sonu\u00e7<\/strong><\/p>\n
          Bu makalede React ile basit bir akordion bile\u015feni nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m g\u00f6sterdim. Bu bile\u015feni kendi projelerinizde kullanabilir ve ihtiya\u00e7lar\u0131n\u0131za g\u00f6re \u00f6zelle\u015ftirebilirsiniz. Akordionlar, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc daha d\u00fczenli ve kullan\u0131\u015fl\u0131 hale getirmek i\u00e7in harika bir ara\u00e7t\u0131r.<\/p>\n
          \u00d6rnek Uygulamay\u0131 \u00c7al\u0131\u015ft\u0131rma:<\/strong><\/p>\n
            \n
          1. Bir React projesi olu\u015fturun.<\/li>\n
          2. Yukar\u0131daki kodlar\u0131 proje klas\u00f6r\u00fcn\u00fcze ekleyin.<\/li>\n
          3. Projenizi ba\u015flat\u0131n ve taray\u0131c\u0131n\u0131zda a\u00e7\u0131n.<\/li>\n<\/ol>\n
            Ek Kaynaklar:<\/strong><\/p>\n
              \n
            • React resmi dok\u00fcmantasyonu<\/li>\n
            • CSS-in-JS \u00e7\u00f6z\u00fcmleri (styled-components, emotion)<\/li>\n
            • Animasyon k\u00fct\u00fcphaneleri (React Spring, Framer Motion)<\/li>\n<\/ul>\n
              Not:<\/strong> Bu makale, React ile akordion olu\u015fturman\u0131n temel bir \u00f6rne\u011fini sunmaktad\u0131r. Daha karma\u015f\u0131k ve \u00f6zel ihtiya\u00e7lara y\u00f6nelik akordionlar i\u00e7in daha geli\u015fmi\u015f teknikler kullanabilirsiniz.<\/p>\n
              Fatih Soysal – Software Engineer<\/strong><\/p>\n
              Bu makaleyi be\u011fendiyseniz l\u00fctfen payla\u015f\u0131n ve yorum yap\u0131n.<\/strong><\/p>\n
              #react #accordion #javascript #webdevelopment<\/strong><\/p>\n
              Umar\u0131m bu makale size yard\u0131mc\u0131 olmu\u015ftur. Ba\u015fka sorular\u0131n\u0131z olursa \u00e7ekinmeden sorabilirsiniz.<\/p>\n","protected":false},"excerpt":{"rendered":"Bu yaz\u0131da, sizlerle React ile akordion (accordion) bile\u015feni olu\u015fturmay\u0131 \u00f6\u011fretece\u011fiz. Ge\u00e7ti\u011fimiz g\u00fcnlerde bir proje i\u00e7in ihtiyac\u0131m oldu, belki…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[128],"tags":[1110],"class_list":{"0":"post-5837","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"tag-react-ile-accordion","8":"cs-entry","9":"cs-video-wrap"},"yoast_head":"\nReact ile Accordion: A\u00e7\u0131l\u0131r\/Kapan\u0131r \u0130\u00e7erik Olu\u015fturma - \u00d6rnek Uygulama - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"description\" content=\"React ile Accordion: A\u00e7\u0131l\u0131r\/Kapan\u0131r \u0130\u00e7erik Olu\u015fturma - \u00d6rnek Uygulama\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/react-ile-accordion-acilir-kapanir-icerik-olusturma-ornek-uygulama\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React ile Accordion: A\u00e7\u0131l\u0131r\/Kapan\u0131r \u0130\u00e7erik Olu\u015fturma - \u00d6rnek Uygulama\" \/>\n<meta property=\"og:description\" content=\"React ile Accordion: A\u00e7\u0131l\u0131r\/Kapan\u0131r \u0130\u00e7erik Olu\u015fturma - \u00d6rnek Uygulama\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/react-ile-accordion-acilir-kapanir-icerik-olusturma-ornek-uygulama\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-06T14:28:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-06T14:32:03+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-accordion-acilir-kapanir-icerik-olusturma-ornek-uygulama\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-accordion-acilir-kapanir-icerik-olusturma-ornek-uygulama\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React ile Accordion: A\u00e7\u0131l\u0131r\/Kapan\u0131r \u0130\u00e7erik Olu\u015fturma – \u00d6rnek Uygulama\",\"datePublished\":\"2024-12-06T14:28:00+00:00\",\"dateModified\":\"2024-12-06T14:32:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-accordion-acilir-kapanir-icerik-olusturma-ornek-uygulama\/\"},\"wordCount\":743,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"keywords\":[\"React ile Accordion:\"],\"articleSection\":[\"React\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-ile-accordion-acilir-kapanir-icerik-olusturma-ornek-uygulama\/#respond\"]}],\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-accordion-acilir-kapanir-icerik-olusturma-ornek-uygulama\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-accordion-acilir-kapanir-icerik-olusturma-ornek-uygulama\/\",\"name\":\"React ile Accordion: A\u00e7\u0131l\u0131r\/Kapan\u0131r \u0130\u00e7erik Olu\u015fturma - \u00d6rnek Uygulama - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2024-12-06T14:28:00+00:00\",\"dateModified\":\"2024-12-06T14:32:03+00:00\",\"description\":\"React ile Accordion: A\u00e7\u0131l\u0131r\/Kapan\u0131r \u0130\u00e7erik Olu\u015fturma - \u00d6rnek Uygulama\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-accordion-acilir-kapanir-icerik-olusturma-ornek-uygulama\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-ile-accordion-acilir-kapanir-icerik-olusturma-ornek-uygulama\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-accordion-acilir-kapanir-icerik-olusturma-ornek-uygulama\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React ile Accordion: A\u00e7\u0131l\u0131r\/Kapan\u0131r \u0130\u00e7erik Olu\u015fturma – \u00d6rnek Uygulama\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React ile Accordion: A\u00e7\u0131l\u0131r\/Kapan\u0131r \u0130\u00e7erik Olu\u015fturma - \u00d6rnek Uygulama - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","description":"React ile Accordion: A\u00e7\u0131l\u0131r\/Kapan\u0131r \u0130\u00e7erik Olu\u015fturma - \u00d6rnek Uygulama","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/react-ile-accordion-acilir-kapanir-icerik-olusturma-ornek-uygulama\/","og_locale":"tr_TR","og_type":"article","og_title":"React ile Accordion: A\u00e7\u0131l\u0131r\/Kapan\u0131r \u0130\u00e7erik Olu\u015fturma - \u00d6rnek Uygulama","og_description":"React ile Accordion: A\u00e7\u0131l\u0131r\/Kapan\u0131r \u0130\u00e7erik Olu\u015fturma - \u00d6rnek Uygulama","og_url":"https:\/\/fatihsoysal.com\/blog\/react-ile-accordion-acilir-kapanir-icerik-olusturma-ornek-uygulama\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2024-12-06T14:28:00+00:00","article_modified_time":"2024-12-06T14:32:03+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"3 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/react-ile-accordion-acilir-kapanir-icerik-olusturma-ornek-uygulama\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-ile-accordion-acilir-kapanir-icerik-olusturma-ornek-uygulama\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React ile Accordion: A\u00e7\u0131l\u0131r\/Kapan\u0131r \u0130\u00e7erik Olu\u015fturma – \u00d6rnek Uygulama","datePublished":"2024-12-06T14:28:00+00:00","dateModified":"2024-12-06T14:32:03+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-ile-accordion-acilir-kapanir-icerik-olusturma-ornek-uygulama\/"},"wordCount":743,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"keywords":["React ile Accordion:"],"articleSection":["React"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/react-ile-accordion-acilir-kapanir-icerik-olusturma-ornek-uygulama\/#respond"]}],"copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/react-ile-accordion-acilir-kapanir-icerik-olusturma-ornek-uygulama\/","url":"https:\/\/fatihsoysal.com\/blog\/react-ile-accordion-acilir-kapanir-icerik-olusturma-ornek-uygulama\/","name":"React ile Accordion: A\u00e7\u0131l\u0131r\/Kapan\u0131r \u0130\u00e7erik Olu\u015fturma - \u00d6rnek Uygulama - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2024-12-06T14:28:00+00:00","dateModified":"2024-12-06T14:32:03+00:00","description":"React ile Accordion: A\u00e7\u0131l\u0131r\/Kapan\u0131r \u0130\u00e7erik Olu\u015fturma - \u00d6rnek Uygulama","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-ile-accordion-acilir-kapanir-icerik-olusturma-ornek-uygulama\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/react-ile-accordion-acilir-kapanir-icerik-olusturma-ornek-uygulama\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/react-ile-accordion-acilir-kapanir-icerik-olusturma-ornek-uygulama\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React ile Accordion: A\u00e7\u0131l\u0131r\/Kapan\u0131r \u0130\u00e7erik Olu\u015fturma – \u00d6rnek Uygulama"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/5837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=5837"}],"version-history":[{"count":6,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/5837\/revisions"}],"predecessor-version":[{"id":5844,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/5837\/revisions\/5844"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=5837"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=5837"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=5837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}