Accordion component with Angular 7 Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern) Announcing the arrival of Valued Associate #679: Cesar Manara Unicorn Meta Zoo #1: Why another podcast?Structuring a reusable angular component with multiple communicating directivesAngular component for a system to store student test scoresAngular4 MultiSelect Componentsingle component angular 4 / node.js appLightweight Angular tooltip componentBuild dynamic HTTP service with AngularList component using RXJS AngularAngular component to render currency or date valuesAngular component for select with custom inputAngular polling and plotting component using Firebase

Magento 2 - Add additional attributes in register

Why are two-digit numbers in Jonathan Swift's "Gulliver's Travels" (1726) written in "German style"?

How do you cope with tons of web fonts when copying and pasting from web pages?

Is there a right way of implementing a T flip flop in verilog wrt using reset signal?

What helicopter has the most rotor blades?

Does the universe have a fixed centre of mass?

Fit odd number of triplets in a measure?

Alternative to "rest in peace" (RIP)

Restricting the Object Type for the get method in a Java HashMap

Why did Bronn offer to be Tyrion Lannister's champion in trial by combat?

Lemmatization Vs Stemming

Does the main washing effect of soap come from foam?

Short story about astronauts fertilizing soil with their own bodies

Compassion's Unity

Is my guitar action too high?

tikz: drawing arrow

IC on Digikey is 5x more expensive than board containing same IC on Alibaba: How?

What's the connection between Mr. Nancy and fried chicken?

No invitation for tourist visa but I want to visit

Magento 2 Editing phtml files in Production Mode

A German immigrant ancestor has a "Registration Affidavit of Alien Enemy" on file. What does that mean exactly?

Fourth cup after starting Nirtzah

Pointing to problems without suggesting solutions

How to get a flat-head nail out of a piece of wood?



Accordion component with Angular 7



Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern)
Announcing the arrival of Valued Associate #679: Cesar Manara
Unicorn Meta Zoo #1: Why another podcast?Structuring a reusable angular component with multiple communicating directivesAngular component for a system to store student test scoresAngular4 MultiSelect Componentsingle component angular 4 / node.js appLightweight Angular tooltip componentBuild dynamic HTTP service with AngularList component using RXJS AngularAngular component to render currency or date valuesAngular component for select with custom inputAngular polling and plotting component using Firebase



.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;








0












$begingroup$


I have to made an accordion-, respectively "zippy"-component using Angular 7.



I'm new to Angular. Just started with it a few weeks ago. But with some Google-usage I was able to implement the required feature.



Here's the way it looks.



In collapsed state:



Closed accordion



In expanded state:



Opened accordion



Here's the code which I wrote for the accordion-component:






import 
Component,
OnInit,
Input
from '@angular/core';
import
Title
from '@angular/platform-browser';

@Component(
selector: 'zippy',
templateUrl: './zippy.component.html',
styleUrls: ['./zippy.component.css']
)
export class ZippyComponent implements OnInit
@Input() title;
isExpanded = false;
buttonCaption = "Expand";

constructor()

ngOnInit()

onClickButton()
this.isExpanded = !this.isExpanded;
this.buttonCaption = this.isExpanded ? "Collapse" : "Expand";


.container 
font-family: Arial, Helvetica, sans-serif;
max-width: 800px;
width: 100%;
margin: auto 2rem;
padding: 3rem 2rem;
border: 1px solid #555;
border-radius: 6px;
text-align: left;
font-size: 2rem;
margin-bottom: 1rem;


nav
display: flex;
justify-content: space-between;


.container a
text-decoration: none;
padding: 0.4rem 0.6rem;
font-size: 2rem;
color: #555;


.container a:hover
cursor: pointer;


main
padding: 0.25rem 1rem;
margin-top: 3rem;
background-color: #eee;
border-radius: 6px;
font-size: 1.4rem;

<div class="container">
<nav>
<div> title </div>
<div>
<a href="#" (click)="onClickButton()">
<i class="fas" [ngClass]="(isExpanded) ? 'fa-angle-up' : 'fa-angle-down'"></i>
</a>
</div>
</nav>
<main *ngIf="isExpanded">
<div class="content">
<ng-content></ng-content>
</div>
</main>
</div>





The code of 'app.component.html':






<div style="text-align:center" class="wrap">
<zippy title="Shipping Details">
<p>Duo dolore sit et clita amet, aliquyam clita sed duo nonumy amet et et et. Rebum amet lorem stet est.</p>
<p>Prose and thy of have days heavenly. Parasites the not unto in so. Delphis yet friend drop cell caught mote, companie a gild favour and.</p>
<p>De quille inouies pieds blonds béni crépuscule les ravie fermentent, béhémots rutilements mer couleurs des de maries pénétra fortes folle. Je de dévorés suivi de. Impassibles liens a a papillon..</p>
</zippy>

<zippy title="Billing Details">
<p>Großer teuren gar im wie freunde du sanft wo, in du wo gar denkst weh liebe so ich dir. Kleinem zu spät du dann ort ort. Nun der denkst gesellschaft.</p>
</zippy>
</div>





The functionality works but currently it just changes from collapsed to expanded state at once. It would be cool to have some animation or something similar when it changes. So that one has a "soft" transition.



If someone knows how to transition that I would love to read his / her answer.



All other hints, recommendations and critiques concerning my implementation welcomed as well.










share|improve this question









$endgroup$


















    0












    $begingroup$


    I have to made an accordion-, respectively "zippy"-component using Angular 7.



    I'm new to Angular. Just started with it a few weeks ago. But with some Google-usage I was able to implement the required feature.



    Here's the way it looks.



    In collapsed state:



    Closed accordion



    In expanded state:



    Opened accordion



    Here's the code which I wrote for the accordion-component:






    import 
    Component,
    OnInit,
    Input
    from '@angular/core';
    import
    Title
    from '@angular/platform-browser';

    @Component(
    selector: 'zippy',
    templateUrl: './zippy.component.html',
    styleUrls: ['./zippy.component.css']
    )
    export class ZippyComponent implements OnInit
    @Input() title;
    isExpanded = false;
    buttonCaption = "Expand";

    constructor()

    ngOnInit()

    onClickButton()
    this.isExpanded = !this.isExpanded;
    this.buttonCaption = this.isExpanded ? "Collapse" : "Expand";


    .container 
    font-family: Arial, Helvetica, sans-serif;
    max-width: 800px;
    width: 100%;
    margin: auto 2rem;
    padding: 3rem 2rem;
    border: 1px solid #555;
    border-radius: 6px;
    text-align: left;
    font-size: 2rem;
    margin-bottom: 1rem;


    nav
    display: flex;
    justify-content: space-between;


    .container a
    text-decoration: none;
    padding: 0.4rem 0.6rem;
    font-size: 2rem;
    color: #555;


    .container a:hover
    cursor: pointer;


    main
    padding: 0.25rem 1rem;
    margin-top: 3rem;
    background-color: #eee;
    border-radius: 6px;
    font-size: 1.4rem;

    <div class="container">
    <nav>
    <div> title </div>
    <div>
    <a href="#" (click)="onClickButton()">
    <i class="fas" [ngClass]="(isExpanded) ? 'fa-angle-up' : 'fa-angle-down'"></i>
    </a>
    </div>
    </nav>
    <main *ngIf="isExpanded">
    <div class="content">
    <ng-content></ng-content>
    </div>
    </main>
    </div>





    The code of 'app.component.html':






    <div style="text-align:center" class="wrap">
    <zippy title="Shipping Details">
    <p>Duo dolore sit et clita amet, aliquyam clita sed duo nonumy amet et et et. Rebum amet lorem stet est.</p>
    <p>Prose and thy of have days heavenly. Parasites the not unto in so. Delphis yet friend drop cell caught mote, companie a gild favour and.</p>
    <p>De quille inouies pieds blonds béni crépuscule les ravie fermentent, béhémots rutilements mer couleurs des de maries pénétra fortes folle. Je de dévorés suivi de. Impassibles liens a a papillon..</p>
    </zippy>

    <zippy title="Billing Details">
    <p>Großer teuren gar im wie freunde du sanft wo, in du wo gar denkst weh liebe so ich dir. Kleinem zu spät du dann ort ort. Nun der denkst gesellschaft.</p>
    </zippy>
    </div>





    The functionality works but currently it just changes from collapsed to expanded state at once. It would be cool to have some animation or something similar when it changes. So that one has a "soft" transition.



    If someone knows how to transition that I would love to read his / her answer.



    All other hints, recommendations and critiques concerning my implementation welcomed as well.










    share|improve this question









    $endgroup$














      0












      0








      0





      $begingroup$


      I have to made an accordion-, respectively "zippy"-component using Angular 7.



      I'm new to Angular. Just started with it a few weeks ago. But with some Google-usage I was able to implement the required feature.



      Here's the way it looks.



      In collapsed state:



      Closed accordion



      In expanded state:



      Opened accordion



      Here's the code which I wrote for the accordion-component:






      import 
      Component,
      OnInit,
      Input
      from '@angular/core';
      import
      Title
      from '@angular/platform-browser';

      @Component(
      selector: 'zippy',
      templateUrl: './zippy.component.html',
      styleUrls: ['./zippy.component.css']
      )
      export class ZippyComponent implements OnInit
      @Input() title;
      isExpanded = false;
      buttonCaption = "Expand";

      constructor()

      ngOnInit()

      onClickButton()
      this.isExpanded = !this.isExpanded;
      this.buttonCaption = this.isExpanded ? "Collapse" : "Expand";


      .container 
      font-family: Arial, Helvetica, sans-serif;
      max-width: 800px;
      width: 100%;
      margin: auto 2rem;
      padding: 3rem 2rem;
      border: 1px solid #555;
      border-radius: 6px;
      text-align: left;
      font-size: 2rem;
      margin-bottom: 1rem;


      nav
      display: flex;
      justify-content: space-between;


      .container a
      text-decoration: none;
      padding: 0.4rem 0.6rem;
      font-size: 2rem;
      color: #555;


      .container a:hover
      cursor: pointer;


      main
      padding: 0.25rem 1rem;
      margin-top: 3rem;
      background-color: #eee;
      border-radius: 6px;
      font-size: 1.4rem;

      <div class="container">
      <nav>
      <div> title </div>
      <div>
      <a href="#" (click)="onClickButton()">
      <i class="fas" [ngClass]="(isExpanded) ? 'fa-angle-up' : 'fa-angle-down'"></i>
      </a>
      </div>
      </nav>
      <main *ngIf="isExpanded">
      <div class="content">
      <ng-content></ng-content>
      </div>
      </main>
      </div>





      The code of 'app.component.html':






      <div style="text-align:center" class="wrap">
      <zippy title="Shipping Details">
      <p>Duo dolore sit et clita amet, aliquyam clita sed duo nonumy amet et et et. Rebum amet lorem stet est.</p>
      <p>Prose and thy of have days heavenly. Parasites the not unto in so. Delphis yet friend drop cell caught mote, companie a gild favour and.</p>
      <p>De quille inouies pieds blonds béni crépuscule les ravie fermentent, béhémots rutilements mer couleurs des de maries pénétra fortes folle. Je de dévorés suivi de. Impassibles liens a a papillon..</p>
      </zippy>

      <zippy title="Billing Details">
      <p>Großer teuren gar im wie freunde du sanft wo, in du wo gar denkst weh liebe so ich dir. Kleinem zu spät du dann ort ort. Nun der denkst gesellschaft.</p>
      </zippy>
      </div>





      The functionality works but currently it just changes from collapsed to expanded state at once. It would be cool to have some animation or something similar when it changes. So that one has a "soft" transition.



      If someone knows how to transition that I would love to read his / her answer.



      All other hints, recommendations and critiques concerning my implementation welcomed as well.










      share|improve this question









      $endgroup$




      I have to made an accordion-, respectively "zippy"-component using Angular 7.



      I'm new to Angular. Just started with it a few weeks ago. But with some Google-usage I was able to implement the required feature.



      Here's the way it looks.



      In collapsed state:



      Closed accordion



      In expanded state:



      Opened accordion



      Here's the code which I wrote for the accordion-component:






      import 
      Component,
      OnInit,
      Input
      from '@angular/core';
      import
      Title
      from '@angular/platform-browser';

      @Component(
      selector: 'zippy',
      templateUrl: './zippy.component.html',
      styleUrls: ['./zippy.component.css']
      )
      export class ZippyComponent implements OnInit
      @Input() title;
      isExpanded = false;
      buttonCaption = "Expand";

      constructor()

      ngOnInit()

      onClickButton()
      this.isExpanded = !this.isExpanded;
      this.buttonCaption = this.isExpanded ? "Collapse" : "Expand";


      .container 
      font-family: Arial, Helvetica, sans-serif;
      max-width: 800px;
      width: 100%;
      margin: auto 2rem;
      padding: 3rem 2rem;
      border: 1px solid #555;
      border-radius: 6px;
      text-align: left;
      font-size: 2rem;
      margin-bottom: 1rem;


      nav
      display: flex;
      justify-content: space-between;


      .container a
      text-decoration: none;
      padding: 0.4rem 0.6rem;
      font-size: 2rem;
      color: #555;


      .container a:hover
      cursor: pointer;


      main
      padding: 0.25rem 1rem;
      margin-top: 3rem;
      background-color: #eee;
      border-radius: 6px;
      font-size: 1.4rem;

      <div class="container">
      <nav>
      <div> title </div>
      <div>
      <a href="#" (click)="onClickButton()">
      <i class="fas" [ngClass]="(isExpanded) ? 'fa-angle-up' : 'fa-angle-down'"></i>
      </a>
      </div>
      </nav>
      <main *ngIf="isExpanded">
      <div class="content">
      <ng-content></ng-content>
      </div>
      </main>
      </div>





      The code of 'app.component.html':






      <div style="text-align:center" class="wrap">
      <zippy title="Shipping Details">
      <p>Duo dolore sit et clita amet, aliquyam clita sed duo nonumy amet et et et. Rebum amet lorem stet est.</p>
      <p>Prose and thy of have days heavenly. Parasites the not unto in so. Delphis yet friend drop cell caught mote, companie a gild favour and.</p>
      <p>De quille inouies pieds blonds béni crépuscule les ravie fermentent, béhémots rutilements mer couleurs des de maries pénétra fortes folle. Je de dévorés suivi de. Impassibles liens a a papillon..</p>
      </zippy>

      <zippy title="Billing Details">
      <p>Großer teuren gar im wie freunde du sanft wo, in du wo gar denkst weh liebe so ich dir. Kleinem zu spät du dann ort ort. Nun der denkst gesellschaft.</p>
      </zippy>
      </div>





      The functionality works but currently it just changes from collapsed to expanded state at once. It would be cool to have some animation or something similar when it changes. So that one has a "soft" transition.



      If someone knows how to transition that I would love to read his / her answer.



      All other hints, recommendations and critiques concerning my implementation welcomed as well.






      import 
      Component,
      OnInit,
      Input
      from '@angular/core';
      import
      Title
      from '@angular/platform-browser';

      @Component(
      selector: 'zippy',
      templateUrl: './zippy.component.html',
      styleUrls: ['./zippy.component.css']
      )
      export class ZippyComponent implements OnInit
      @Input() title;
      isExpanded = false;
      buttonCaption = "Expand";

      constructor()

      ngOnInit()

      onClickButton()
      this.isExpanded = !this.isExpanded;
      this.buttonCaption = this.isExpanded ? "Collapse" : "Expand";


      .container 
      font-family: Arial, Helvetica, sans-serif;
      max-width: 800px;
      width: 100%;
      margin: auto 2rem;
      padding: 3rem 2rem;
      border: 1px solid #555;
      border-radius: 6px;
      text-align: left;
      font-size: 2rem;
      margin-bottom: 1rem;


      nav
      display: flex;
      justify-content: space-between;


      .container a
      text-decoration: none;
      padding: 0.4rem 0.6rem;
      font-size: 2rem;
      color: #555;


      .container a:hover
      cursor: pointer;


      main
      padding: 0.25rem 1rem;
      margin-top: 3rem;
      background-color: #eee;
      border-radius: 6px;
      font-size: 1.4rem;

      <div class="container">
      <nav>
      <div> title </div>
      <div>
      <a href="#" (click)="onClickButton()">
      <i class="fas" [ngClass]="(isExpanded) ? 'fa-angle-up' : 'fa-angle-down'"></i>
      </a>
      </div>
      </nav>
      <main *ngIf="isExpanded">
      <div class="content">
      <ng-content></ng-content>
      </div>
      </main>
      </div>





      import 
      Component,
      OnInit,
      Input
      from '@angular/core';
      import
      Title
      from '@angular/platform-browser';

      @Component(
      selector: 'zippy',
      templateUrl: './zippy.component.html',
      styleUrls: ['./zippy.component.css']
      )
      export class ZippyComponent implements OnInit
      @Input() title;
      isExpanded = false;
      buttonCaption = "Expand";

      constructor()

      ngOnInit()

      onClickButton()
      this.isExpanded = !this.isExpanded;
      this.buttonCaption = this.isExpanded ? "Collapse" : "Expand";


      .container 
      font-family: Arial, Helvetica, sans-serif;
      max-width: 800px;
      width: 100%;
      margin: auto 2rem;
      padding: 3rem 2rem;
      border: 1px solid #555;
      border-radius: 6px;
      text-align: left;
      font-size: 2rem;
      margin-bottom: 1rem;


      nav
      display: flex;
      justify-content: space-between;


      .container a
      text-decoration: none;
      padding: 0.4rem 0.6rem;
      font-size: 2rem;
      color: #555;


      .container a:hover
      cursor: pointer;


      main
      padding: 0.25rem 1rem;
      margin-top: 3rem;
      background-color: #eee;
      border-radius: 6px;
      font-size: 1.4rem;

      <div class="container">
      <nav>
      <div> title </div>
      <div>
      <a href="#" (click)="onClickButton()">
      <i class="fas" [ngClass]="(isExpanded) ? 'fa-angle-up' : 'fa-angle-down'"></i>
      </a>
      </div>
      </nav>
      <main *ngIf="isExpanded">
      <div class="content">
      <ng-content></ng-content>
      </div>
      </main>
      </div>





      <div style="text-align:center" class="wrap">
      <zippy title="Shipping Details">
      <p>Duo dolore sit et clita amet, aliquyam clita sed duo nonumy amet et et et. Rebum amet lorem stet est.</p>
      <p>Prose and thy of have days heavenly. Parasites the not unto in so. Delphis yet friend drop cell caught mote, companie a gild favour and.</p>
      <p>De quille inouies pieds blonds béni crépuscule les ravie fermentent, béhémots rutilements mer couleurs des de maries pénétra fortes folle. Je de dévorés suivi de. Impassibles liens a a papillon..</p>
      </zippy>

      <zippy title="Billing Details">
      <p>Großer teuren gar im wie freunde du sanft wo, in du wo gar denkst weh liebe so ich dir. Kleinem zu spät du dann ort ort. Nun der denkst gesellschaft.</p>
      </zippy>
      </div>





      <div style="text-align:center" class="wrap">
      <zippy title="Shipping Details">
      <p>Duo dolore sit et clita amet, aliquyam clita sed duo nonumy amet et et et. Rebum amet lorem stet est.</p>
      <p>Prose and thy of have days heavenly. Parasites the not unto in so. Delphis yet friend drop cell caught mote, companie a gild favour and.</p>
      <p>De quille inouies pieds blonds béni crépuscule les ravie fermentent, béhémots rutilements mer couleurs des de maries pénétra fortes folle. Je de dévorés suivi de. Impassibles liens a a papillon..</p>
      </zippy>

      <zippy title="Billing Details">
      <p>Großer teuren gar im wie freunde du sanft wo, in du wo gar denkst weh liebe so ich dir. Kleinem zu spät du dann ort ort. Nun der denkst gesellschaft.</p>
      </zippy>
      </div>






      javascript angular-2+






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked 14 mins ago









      michael.zechmichael.zech

      1,7901935




      1,7901935




















          0






          active

          oldest

          votes












          Your Answer






          StackExchange.ifUsing("editor", function ()
          StackExchange.using("externalEditor", function ()
          StackExchange.using("snippets", function ()
          StackExchange.snippets.init();
          );
          );
          , "code-snippets");

          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "196"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: false,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: null,
          bindNavPrevention: true,
          postfix: "",
          imageUploader:
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          ,
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );













          draft saved

          draft discarded


















          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f217888%2faccordion-component-with-angular-7%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown

























          0






          active

          oldest

          votes








          0






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes















          draft saved

          draft discarded
















































          Thanks for contributing an answer to Code Review Stack Exchange!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid


          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.

          Use MathJax to format equations. MathJax reference.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f217888%2faccordion-component-with-angular-7%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          名間水力發電廠 目录 沿革 設施 鄰近設施 註釋 外部連結 导航菜单23°50′10″N 120°42′41″E / 23.83611°N 120.71139°E / 23.83611; 120.7113923°50′10″N 120°42′41″E / 23.83611°N 120.71139°E / 23.83611; 120.71139計畫概要原始内容臺灣第一座BOT 模式開發的水力發電廠-名間水力電廠名間水力發電廠 水利署首件BOT案原始内容《小檔案》名間電廠 首座BOT水力發電廠原始内容名間電廠BOT - 經濟部水利署中區水資源局

          Prove that NP is closed under karp reduction?Space(n) not closed under Karp reductions - what about NTime(n)?Class P is closed under rotation?Prove or disprove that $NL$ is closed under polynomial many-one reductions$mathbfNC_2$ is closed under log-space reductionOn Karp reductionwhen can I know if a class (complexity) is closed under reduction (cook/karp)Check if class $PSPACE$ is closed under polyonomially space reductionIs NPSPACE also closed under polynomial-time reduction and under log-space reduction?Prove PSPACE is closed under complement?Prove PSPACE is closed under union?

          Is my guitar’s action too high? Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern)Strings too stiff on a recently purchased acoustic guitar | Cort AD880CEIs the action of my guitar really high?Μy little finger is too weak to play guitarWith guitar, how long should I give my fingers to strengthen / callous?When playing a fret the guitar sounds mutedPlaying (Barre) chords up the guitar neckI think my guitar strings are wound too tight and I can't play barre chordsF barre chord on an SG guitarHow to find to the right strings of a barre chord by feel?High action on higher fret on my steel acoustic guitar