CLASS="active" according to a selected tab

Navigation
2

Hello

I intend to create a notepad, where a title and a note will be inserted.

For each note entered, a tab will be created.

I want to click on the tab and load the title and note into an input and text area automatically.

To recover the values I am using the following code: 

<?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();
?>

But I'm not able to display in the block just the clicked id (selected tab).

For each note, a block is displayed (See sample image).

Below is all the code I've been using so far: 

<?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>

I believe there should be some code to enable and disable the class in: 

<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>

And another code to activate class in: 

<div class="tab-pane código para ativar classe" ...

I do not know exactly what should be done. Can you help me?

How are you today:

HowdoIwantittostay:

    
asked by anonymous 15.12.2016 / 16:25

1 answer

2

Resolved personal;

As follows: 

<?php

    $classActive = "";
    $divMenu = "";
    $divPanel = "";

    $this->db->order_by('id', 'asc');
    $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();
    $contador = 0;
    foreach ($nota as $row) {
        $classActive .= ($contador == 0) ? "active" : "inactive";
        //$divMenu = "<li class=\"" . $classActive . "\"><a href=\"#" . $row['id'] . "\" data-toggle=\"tab\"><i class=\"\"></i>" . $row['titulo'] . "</a></li>";
        $divPanel .= "
        <div class=\"tab-pane " . $classActive . "\" id=\"" . $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=\"" . $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...\">" . $row['nota'] . "</textarea>
                    </div>
                </div>
            </div>
        </div>";
        $contador++;
    }
?>
<div class="row">
    <div class="col-sm-4">
        <ul class="nav tabs-vertical">
        <?php foreach ($nota as $row){?>
            <li class="">
                <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 echo $divPanel; ?>
        </div>  
    </div>
</div>

<style>
.ruledpaper {
  line-height: 2em;
  background: #ffffee -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(0.96, rgba(0, 0, 0, 0)), color-stop(0.98, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  background-size: auto 2em;
  overflow: hidden;
  padding: 0em;
  border: solid 0.5em #ffffee;
  -webkit-box-shadow: 0.2em 0.2em 0.2em silver; }

#sample {
  width: 57em;
  height: 25em;
  font-size: 15px; }
</style>

See picture below:

    
15.12.2016 / 21:18
Problem with margin-top css is it possible to see the execution order of the entity?