Olá!
Tenho a intenção de criar um bloco de notas, onde será inserido um título e uma nota.
Para cada nota inserida, será criado um tab.
Eu quero clicar sobre o tab e carregar o título e a nota em um input e área de texto automaticamente.
Para recuperar os valores estou usando o seguinte código:
<?php
$this->db->order_by('id' , 'desc');
$this->db->where('usuario_id' , $this->session->userdata('id'));
$this->db->where('usuario_nome' , $this->session->userdata('usuario_nome'));
$nota = $this->db->get('nota')->result_array();
?>
Porem não estou conseguindo exibir no bloco somente do id clicado(tab selecionada).
Para cada nota, está sendo exibido um bloco(Ver imagem de exemplo).
Abaixo está todo o código que estou utilizando até então:
<?php
$this->db->order_by('id' , 'desc');
$this->db->where('usuario_id' , $this->session->userdata('id'));
$this->db->where('usuario_nome' , $this->session->userdata('usuario_nome'));
$nota = $this->db->get('nota')->result_array();
?>
<div class="row">
<div class="col-sm-4">
<ul class="nav tabs-vertical" style="">
<?php foreach ($nota as $row){?>
<li class="active">
<a href="#<?php echo $row['id'];?>" data-toggle="tab"> <i class=""></i> <?php echo $row['titulo'];?> </a>
</li>
<?php }?>
</ul>
</div>
<div class="col-sm-8">
<div class="tab-content" style="width: 70%;">
<?php
$counter = 0;
foreach ($nota as $row):
$counter++;
?>
<div class="tab-pane active"
" id="<?php echo $row['id'];?>">
<div id="sample" class="ruledpaper ">
<div class="form-group" style="margin: 0px;">
<div class="col-md-12" style="padding:0px; background-color: #FFFCEE; font-size: 5px;">
<input type="text" class="form-control" rows="14" style="padding: 5px; border:0px; background-color: #fff6cc; font-size: 18px;" name="titulo" placeholder="Título" value="<?php echo $row['titulo'];?>">
</div>
</div>
<hr style="margin: 0px;" />
<div class="form-group">
<div class="col-md-12" style="padding:0px;">
<textarea maxlength="60" class="ruledpaper form-control" rows="" cols="" style="padding: 5px; border:0px; min-height: 350px;" name="nota" placeholder="Digite o texto....."><?php echo $row['nota'];?></textarea>
</div>
</div>
</div>
<?php endforeach;?>
</div>
</div>
</div>
Acredito que deve existir algum código para ativar e desativar a class em:
<li class="código para ativar classe">
<a href="#<?php echo $row['id'];?>" data-toggle="tab"> <i class=""></i> <?php echo $row['titulo'];?> </a>
</li>
E outro código para ativar class em:
<div class="tab-pane código para ativar classe" ...
Não sei exatamente o que deve ser feito. Podem me ajudar?